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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
javascript打印输出json实例
Nov 11 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
使用Vue生成动态表单
Nov 26 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
JavaScript实现移动端拖动元素
Nov 24 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实现蜘蛛访问日志统计
2013/07/05 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
移动前端图片压缩上传的实例
2017/12/06 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Linux下python制作名片示例
2018/07/20 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python实现按行分割文件
2019/07/22 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
结构和类有什么异同
2012/07/16 面试题
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
公司大门门卫岗位职责
2014/06/11 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
2015年教研员工作总结
2015/05/26 职场文书
刮痧观后感
2015/06/05 职场文书
2016年情人节问候语
2015/11/11 职场文书