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

2019-11-19 11:59:26

字体：大中小

来源：转载

供稿：网友

一、前端代码

<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解决的一种方式

1.添加如下依赖：

    <dependency>      <groupId>io.github.openfeign.form</groupId>      <artifactId>feign-form</artifactId>      <version>3.0.3</version>    </dependency>    <dependency>      <groupId>io.github.openfeign.form</groupId>      <artifactId>feign-form-spring</artifactId>      <version>3.0.3</version>    </dependency>    <dependency>      <groupId>commons-fileupload</groupId>      <artifactId>commons-fileupload</artifactId>      <version>1.3.3</version>    </dependency>

2.Feign 接口实现

@FeignClient(name = "resource-client",url = "http://xxxx",path = "resource",configuration = ResourceServiceFeignClient.MultipartSupportConfig.class)public interface ResourceServiceFeignClient {  @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)  Resource upload(@RequestPart("file") MultipartFile file);  class MultipartSupportConfig {    @Bean    public Encoder feignFormEncoder() {      return new SpringFormEncoder();    }  }}

这里Feign是通过url实现的接口调用，并没有通过SpringCloud注册中心服务发现来实现接口调用,因为我所在的项目是独立在服务化体系外的

3.将Feign接口自动注入，正常使用就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：使用webpack搭建vue项目实现脚手架功能

下一篇：详解用vue2.x版本+adminLTE开源框架搭建后台应用模版