刚才在写功能的时候,用到了基于feign做图片上传,和传统的上传方式有一点点不同,在此记录一下。
1.页面
<div class="new-photo">
<p>当前头像:</p>
<div class="upload">
<img id="imgShow_WU_FILE_0" width="100" height="100" src="/img/_/photo_icon.png" alt="">
<input type="file" id="userPhoto" @change="uploadFile($event)" multiple="multiple"/>
</div>
</div>
2.vue
uploadFile:function(event){
this.file = event.target.files[0]; //获取input的图片file值
let param = new FormData(); // 创建form对象
param.append('file', this.file);//对应后台接收图片名
axios.post('/api/wsetting/uploadHeadPhoto',param).then(function(response){
if (response.data.flag){
alert("头像上传成功")
}
})
}
3.feign接口定义
/**
* @Author: weizhaohui
* @Description:
* @Date:Create:in 2019/11/2 16:16
*/
@FeignClient(name = "file", configuration = UploadConfig.class)//UploadConfig为自定义配置类
public interface FileFeign {
//通过consumes设置content-type
@PostMapping(value="/file/upload",consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
//在进行文件上传时,需要使用@RequestPart注解修饰参数
public Result uploadFile(@RequestPart(value = "file") MultipartFile file);
}
网友评论