vue使用axios上传文件(FormData)的方法


Posted in Javascript onApril 14, 2019

在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。

过多介绍不说,过多的煽情语句不说,直接来来干活,希望对广大博友有所帮助。也希望各位大神不吝赐教

1.前台上传文件的表单和响应函数

<!--文件上传表单-->
<form>
 <input type="text" value="" v-model="name" placeholder="请输入用户名">
 <input type="text" value="" v-model="age" placeholder="请输入年龄">
 <input type="file" @change="getFile($event)">
 <input type="file" @change="getFile2($event)">
 <button @click="submit($event)">提交</button>
</form>

表单可以根据自己需要选择合适的表单,我在此选用的原生表单。

vue 定义文件数据类型:

data () {
 return{
  //文件
  file: '',
  file2: '',
 }
},

表单按钮的响应函数

getFile(event) {
 this.file = event.target.files[0];
 console.log(this.file);
},
getFile2(event) {
 this.file2 = event.target.files[0];
 console.log(this.file2);
},

上传单文件和多文件其实都是一样,主要的区别在后台接受文件形式和前台如何向后台传递数据

主要区别在 submit 响应函数中。

单文件例子:

submit(event) {
 event.preventDefault();//取消默认行为
 //创建 formData 对象
 let formData = new FormData();
 // 向 formData 对象中添加文件
 formData.append('file',this.file);
 
 http.uploadFile("taskManage/uploadFile2",formData).then(function (response) {
  console.log("res: ",response);
 })
},

多文件例子:

submit(event) {
 event.preventDefault();//取消默认行为
 //创建 formData 对象
 let formData = new FormData();
 // 向 formData 对象中添加文件
 formData.append('file',this.file);
 formData.append('file',this.file2);
 
 http.uploadFile("taskManage/uploadFile2",formData).then(function (response) {
  console.log("res: ",response);
 })
},

看到这里是不是感觉很搞笑,单文件和多文件的区别竟然在于向 formData 中添加了多少个文件。其实技术就是这样,玩过了,就觉得很好玩越来越有兴趣。

 注: http.uploadFile 是我自己封装的方法,用来上传文件的,为了防止文章没有针对性,就分开写了。

axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件的请求。使用的时候只需要在响应的 vue 组件中引入就可以。

import Vue from 'vue';
import VueCookie from 'vue-cookie';
import axios from 'axios';
// import toastr from '../assets/toastr.min';
// Vue.use(axios)


let http = {};
// let _baseURL = '/vpaas'
let _baseURL = 'http://localhost:8080/vpaas'
let ContentType = "application/json";

let uploadFileType = "multipart/form-data";
http.baseURL = _baseURL;


/**
 * 上传文件的请求
 * @param url
 * @returns {AxiosPromise}
 */
http.uploadFile = function (url, data) {
 let config = {
  //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
  url: url,
  //基础url前缀
  baseURL: _baseURL,
  transformResponse: [function (data1) {
   var data = data1;
   if (typeof data1 == "string") {
    data = JSON.parse(data1);
   }
   //这里提前处理返回的数据;
   if (data.message && (data.data === 'login.invalid.token')) {
    window.localStorage.removeItem("access-user");
    alert("超时请重新登陆");
    window.location.href = '/';
   }
   return data;
  }],
  //请求头信息
  headers: {'access-user': window.localStorage.getItem('access-user'), 'Content-Type': uploadFileType},

  //跨域请求时是否需要使用凭证
  withCredentials: true,
  // 返回数据类型
  responseType: 'json', //default
 };
 return axios.post(url, data, config);
};

哪里理解有误,欢迎各位大神不吝指教。

2:后台接受文件

控制器主要有一个全局的注解:

@RequestMapping("taskManage")

单文件的格式:

/**
 * 文件接收控制器
 */
@PostMapping("uploadFile")
public Object multipleSave(@RequestParam("file") MultipartFile file){
  logger.info("上传的文件:",file);
  logger.info("上传的文件");
  return null;
}

多文件格式:

后台接受方式有两种,两种都有不同的通途。

接受的文件个数为有限个时:

/**
 * 文件接收控制器
 */
@PostMapping("uploadFile")
public Object multipleSave(@RequestParam("file") MultipartFile file,@RequestParam("file2") MultipartFile file2){
  logger.info("上传的文件:",file);
  logger.info("上传的文件2:",file2);
  logger.info("上传的文件");
  return null;
}

接受文件个数为无限个时:

@PostMapping("uploadFile")
public Object multipleSave(@RequestParam("file") MultipartFile[] file){
  logger.info("上传的文件:",file);
  logger.info("上传的文件");
  return null;
}

利用数组的格式接收多文件,利用 for 循环就可以取出所有的文件,这里就不做一一解释了。    

方法都已经亲测,希望对广大博友有丝毫的帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 列表双向选择器之改进版
Aug 09 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
详解如何理解vue的key属性
Apr 14 #Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 #Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 #Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 #Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 #Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 #Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 #Javascript
You might like
php 读取shell管道传输过来的内容
2010/03/01 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php获取远程文件大小
2015/10/20 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
便利店的创业计划书
2014/01/15 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
毕业论文致谢范文
2015/05/14 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书