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

法

⼀、前端代码

:http-request=\"createAppVersion\" :data=\"appVersion\" :auto-upload=\"false\" :limit=\"1\"

:on-change=\"onFileUploadChange\" :on-remove=\"onFileRemove\">

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); }) },

说明：

1. el-upload 的 ref=\"upload\" 给这个组件起个变量名，以便 js逻辑代码可以引⽤2. http-request=\"createAppVersion\" el-upload 上传使使⽤⾃定义的⽅法3. :data=\"appVersion\" 上传时提交的表单数据

4. onSubmitClick ⽅法中会调⽤el-upload.submit()⽅法，进⽽调⽤createAppVersion（）⽅法5. 组成表单参数，取得上传的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.添加如下依赖：

io.github.openfeign.form feign-form 3.0.3

io.github.openfeign.form feign-form-spring 3.0.3

commons-fileupload commons-fileupload 1.3.3

2.Feign 接⼝实现

@FeignClient(name = \"resource-client\public interface ResourceServiceFeignClient {

@PostMapping(value = \"/upload\ Resource upload(@RequestPart(\"file\") MultipartFile file); class MultipartSupportConfig { @Bean

public Encoder feignFormEncoder() { return new SpringFormEncoder(); } }}

这⾥Feign是通过url实现的接⼝调⽤，并没有通过SpringCloud注册中⼼服务发现来实现接⼝调⽤,因为我所在的项⽬是独⽴在服务化体系外的

3.将Feign接⼝⾃动注⼊，正常使⽤就⾏了。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。