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


Posted in Javascript onMarch 15, 2019

一、前端代码

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

   },

说明:

  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.添加如下依赖:

<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接口自动注入,正常使用就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 #Javascript
详解React项目中碰到的IE问题
Mar 14 #Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 #Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 #Javascript
Node.js + express基本用法教程
Mar 14 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
一些常用的php简单命令代码集锦
2007/09/24 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
thinkphp缓存技术详解
2014/12/09 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php集成开发环境详解
2019/09/24 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
js图片轮播插件的封装
2017/07/21 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
实例讲解python函数式编程
2014/06/09 Python
记录Django开发心得
2014/07/16 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
银行内勤岗位职责
2014/04/09 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
期末复习计划
2015/01/19 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers