vue使用el-upload上传文件及Feign服务间传递文件的方法

一、前端代码

<el-upload class="step_content" drag         action="string"         ref="upload"         :multiple="false"         :http-request="createAppVersion"         :data="appVersion"         :auto-upload="false"         :limit="1"         :on-change="onFileUploadChange"         :on-remove="onFileRemove">    <i class="el-icon-upload"></i>    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload> <div class="mgt30">    <el-button v-show="createAppVisible" :disabled="createAppDisable" type="primary" class="mgt30"          @click="onSubmitClick">立即创建    </el-button> </div>.... onSubmitClick() {    this.$refs.upload.submit();   },   createAppVersion(param) {    this.globalLoading = true;    const formData = new FormData();    formData.append('file', param.file);    formData.append('appVersion', JSON.stringify(this.appVersion));    addAppVersionApi(formData).then(res => {     this.globalLoading = false;     this.$message({message: '创建APP VERION 成功', type: 'success'});     this.uploadFinish();    }).catch(reason => {     this.globalLoading = false;     this.showDialog(reason);    })   },

说明：

el-upload 的 ref="upload" 给这个组件起个变量名，以便 js逻辑代码可以引用 http-request="createAppVersion" el-upload 上传使使用自定义的方法 :data="appVersion" 上传时提交的表单数据 onSubmitClick 方法中会调用el-upload.submit()方法，进而调用createAppVersion（）方法 组成表单参数，取得上传的file 和 其它参数

const formData = new FormData();formData.append('file', param.file);formData.append('appVersion', JSON.stringify(this.appVersion));

6.addAppVersionApi 最终会调用下面的方法，其中formData就是param， 请求需要加header： 'Content-Type': 'multipart/form-data'

 function httpPostMutipartFileAsyn(url, param) { return new Promise((resolve, reject) => {  request({   url: url,   headers: {    'Content-Type': 'multipart/form-data'   },   method: 'post',   data: param  }).then(response => {   if (response.data.status.code === 0) {    resolve(response.data)   } else {    reject(response.data.status)   }  }).catch(response => {   reject(response)  }) })}

二、后端代码

1.后端controller接口

@PostMapping("/version/add")  public RestResult addAppVersion(@RequestParam("appVersion") String appVersion,                  @RequestParam("file") MultipartFile multipartFile) {    ....        return new RestResult();  }

三、Feign 实现服务间传递MultipartFile参数

Controller的addAppVersion（）接口，收到上传的文件后，需要通过Http调用远程接口，将文件上传到资源服务。一开始尝试使用OKHttp 和 RestTemplate 实现，但是这两种方法都必须将文件先保存，无法直接传递MultipartFile参数，然后才能通过OKHttp 和 RestTemplate提供的相关接口去实现。 本着不想在本地保存临时文件的，找到了通过Feign解决的一种方式