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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
详解用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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python实现猜数字游戏
2020/03/25 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python实现最速下降法
2020/03/24 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
PyQt5实现登录页面
2020/05/30 Python
Python新手学习装饰器
2020/06/04 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
仓库主管的岗位职责
2013/12/04 职场文书
乳制品整治工作方案
2014/05/29 职场文书
阅兵口号
2014/06/19 职场文书
教师节表彰会主持词
2015/07/06 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis