vue+elementUI+proxy 上傳檔案

vue+elementUI+proxy 上傳檔案

步驟

el-upload中設定 :http-request = newrequest 重新定義上傳方式為newrequest
methods中寫newrequest (param){}
file = param.file 獲取要上傳的檔案
let submitform = new FormData()
submitform.append(「file」, file) , 新增file
設定config 中 header為multipart/form-data
上傳

                <el-upload
                action= "#"
                list-type="picture-card"
                :http-request = changeheader
                >

 	  let fileObject = param.file
      let pic = new FormData()
      pic.append('fileName', fileObject)
      let url = 'xxx'
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios({
        method: 'post',
        url: url,
        data: pic,
        config: config
      }).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })

設定proxy

在config中 index.js裡改為

    proxyTable: {
      '/api': {
        target: 'xxxx',
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/api' : ''    
        }
      }
    },

可以解決跨域問題，呼叫的時候axios中url改為/api/xxx（xxxx為目標url中去掉ip地址和埠的部分），上文target為目標伺服器的地址和埠