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 相关文章推荐
自动更新作用
Oct 08 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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
3
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
js实现拖拽功能
2017/03/01 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
会议接待欢迎词
2014/01/12 职场文书
服务生自我鉴定
2014/01/22 职场文书
党员干部公开承诺书
2014/03/26 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
雷锋之歌观后感
2015/06/10 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
三八妇女节主持词
2015/07/04 职场文书