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为目标服务器的地址和端口