vue iview upload组件上传跨域在前端代理解决

vue 的 iview upload组件上传存在跨域问题

<template>
    <Upload action="//jsonplaceholder.typicode.com/posts/">
        <Button icon="ios-cloud-upload-outline">Upload files</Button>
    </Upload>
</template>

因为action必须填写完整路径，比如 http://localhost:8081/upload ，这样就出现了跨域问题，网上博客都是说在后端解决跨域问题，但是我的后端集成了spring security，在后端设置跨域，会造成新的问题（详见 https://blog.csdn.net/qq1032355091/article/details/89280899），所以我还是希望在前端代理解决跨域问题。

但是upload组件的action请求没办法代理跨域，解决办法如下：

1.使用iview的手动上传组件

<Upload
          :before-upload="handleUpload"
          action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">选择excel文件上传</Button>
        </Upload>
        <div v-if="file !== null">
            待上传文件: {{ file.name }}
            <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? '上传中' : '点击上传' }}</Button>
        </div>

注意：此时action设置任何值都无所谓，但是必须有值，这个值并不生效 ，不然报错。

2.methods里面编写upload方法

handleUpload (file) {
            this.file = file;
            return false;
          },

upload () {
            let fileFormData = new FormData();
            fileFormData.append('file', this.file);
            let requestConfig = {
              headers: {
                'Content-Type': 'multipart/form-data'
              },
            }
            this.axios.post('/department/upload', fileFormData, requestConfig).then((res) => {
              alert(res.data.msg)
            })

          }

3.后台controller如下：

@PostMapping("/upload")
	@ResponseBody
	public RespBean upload(@RequestParam("file") MultipartFile multipartFile) {
		try {
	//后台逻辑
		} 
		catch (Exception e) {
			log.error("上传excel失败");
			return RespBean.error("上传excel失败");
		}
		return null;
	}

 

4.注意，我出现了报错：no multipart boundary was found ，报错找不到multipart  file

原因是因为我的main.js里对axios的请求作了统一转换

//axios post请求全局处理参数
// axios.defaults.transformRequest = function (data) {
//   data = qs.stringify(data);
//   return data;
// };

这是对post请求参数的统一qs转换。

所以必须注释掉这个统一转换，

然后运行生效。

5.最后，注释了axios请求的参数统一转换配置axios.defaults.transformRequest，辣么vue代码中相应的axios post 请求就需要分别单独设置了，记得修改，比如：