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

淡淡的烟草味﹌ 2022-02-16 19:45 1017阅读 0赞

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][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 ][no multipart boundary was found] 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 请求就需要分别单独设置了，记得修改，比如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTAzMjM1NTA5MQ_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_qq1032355091_article_details_89280899]: https://blog.csdn.net/qq1032355091/article/details/89280899
[no multipart boundary was found]: https://segmentfault.com/q/1010000018349544
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTAzMjM1NTA5MQ_size_16_color_FFFFFF_t_70]: /images/20220216/10fe306d8e074a7188185726a9ab5bc4.png