微客导航 » 文章资讯 » vue使用el-upload上传文件及Feign服务间传递文件的方法

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

2023-08-26 12:55:05 327

一、前端代码



将文件拖到此处，或点击上传

立即创建

.... onSubmitClick(){ this.$refs.upload.submit(); }, createAppVersion(param){ this.globalLoading=true; constformData=newFormData(); formData.append('file',param.file); formData.append('appVersion',JSON.stringify(this.appVersion)); addAppVersionApi(formData).then(res=>{ this.globalLoading=false; this.$message({message:'创建APPVERION成功',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和其它参数

constformData=newFormData();
formData.append('file',param.file);
formData.append('appVersion',JSON.stringify(this.appVersion));

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

functionhttpPostMutipartFileAsyn(url,param){
returnnewPromise((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")
publicRestResultaddAppVersion(@RequestParam("appVersion")StringappVersion,
@RequestParam("file")MultipartFilemultipartFile){

....

returnnewRestResult();
}

三、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",url="http://xxxx",path="resource",configuration=ResourceServiceFeignClient.MultipartSupportConfig.class)
publicinterfaceResourceServiceFeignClient{

@PostMapping(value="/upload",consumes=MediaType.MULTIPART_FORM_DATA_VALUE)
Resourceupload(@RequestPart("file")MultipartFilefile);

classMultipartSupportConfig{
@Bean
publicEncoderfeignFormEncoder(){
returnnewSpringFormEncoder();
}
}

}

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

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐