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 object and DOM element
Apr 15 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
详解如何理解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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
js实现简单的验证码
2015/12/25 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
webpack优化的深入理解
2018/12/10 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
利用python 下载bilibili视频
2020/11/13 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
白血病募捐倡议书
2014/05/14 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
婚宴致辞
2015/07/28 职场文书