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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
讲解vue-router之什么是嵌套路由
May 28 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python画微信表情符的实例代码
2019/10/09 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers