axios实现简单文件上传功能


Posted in Javascript onSeptember 25, 2019

本文实例为大家分享了axios实现文件上传功能的具体代码,供大家参考,具体内容如下

前台页面:

引入axios js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

HTML:

<input type="file" name="img"/>
<br>
<span οnclick="upload()">上传图片</span>

JS:

function upload() {
 alert("上传")
 let file = document.getElementsByName('img')[0].files[0];
 
 let formData = new FormData();
 formData.append("uploadFile",file,file.name);
 
 const config = {
 headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
 };
 
 axios
 .post("/file/upload",formData,config)
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

后台接收:

@PostMapping(value = "/upload")
public String upload(HttpServletRequest request){
 logger.info("开始上传……");
 
 MultipartHttpServletRequest servletRequest = (MultipartHttpServletRequest) request;
 Map<String, MultipartFile> fileMap = servletRequest.getFileMap();
 for (Map.Entry entry : fileMap.entrySet()) {
 logger.info("name : {}",entry.getKey());
 MultipartFile multipartFile = (MultipartFile) entry.getValue();
 try {
  FileUtil.writeFile(multipartFile.getInputStream(),path+"/12_"+multipartFile.getOriginalFilename());
 } catch (IOException e) {
  e.printStackTrace();
 }
 }
 return "{'result':'OK'}";
}
 
 
@RequestMapping(value = "/uploadII")
public String uploadII(@RequestParam("uploadFile") MultipartFile uploadFile){
 logger.info("upload : {}",uploadFile);
 try {
 InputStream inputStream = uploadFile.getInputStream();
 String originalFilename = uploadFile.getOriginalFilename();
 logger.info("file : {}",originalFilename);
 FileUtil.writeFile(inputStream,path+"/"+originalFilename);
 } catch (IOException e) {
 e.printStackTrace();
 }
 return "{'result':'OK'}";
}

pox.xml:

<!-- 文件上传 -->
<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3</version>
</dependency>

注入CommonsMultipartResolver:

@Bean
public CommonsMultipartResolver initCommonsMultipartResolver(){
 CommonsMultipartResolver resolver = new CommonsMultipartResolver();
 resolver.setMaxUploadSize(104857600);
 resolver.setMaxInMemorySize(4096);
 return resolver;
}

GitHub:axios

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
详解javascript事件冒泡
Jan 09 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
JS实现轮播图效果
Jan 11 Javascript
vuex的使用步骤
Jan 06 Vue.js
layer弹出层取消遮罩的方法
Sep 25 #Javascript
QML实现圆环颜色选择器
Sep 25 #Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 #Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 #Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 #Javascript
layer 关闭指定弹出层的例子
Sep 25 #Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 #Javascript
You might like
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
python difflib模块示例讲解
2017/09/13 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python实现k-means算法
2018/02/23 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
如何开启linux的ssh服务
2015/02/14 面试题
协议书怎么写
2014/04/21 职场文书
干部选拔任用方案
2014/05/26 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
博物馆观后感
2015/06/05 职场文书
自书遗嘱范文
2015/08/07 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫