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 编写匿名函数的几种方法
Feb 21 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
新浪的图片新闻效果
2007/01/13 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
js单例模式详解实例
2013/11/21 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
小学校长竞聘演讲稿
2014/05/16 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers