美文网首页
微服务间feign图片上传

微服务间feign图片上传

作者: 辉_ace | 来源:发表于2019-11-02 17:02 被阅读0次

    刚才在写功能的时候,用到了基于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);
    }
    

    相关文章

      网友评论

          本文标题:微服务间feign图片上传

          本文链接:https://www.haomeiwen.com/subject/irhhbctx.html