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 写类方式之九
Jul 05 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 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
PHP 创建标签云函数代码
2010/05/26 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
jQuery 位置插件
2008/12/25 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue登录路由验证的实现
2017/12/13 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
任课老师推荐信范文
2013/11/24 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
交通事故私了协议书
2014/04/16 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
广播体操比赛口号
2014/06/10 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
春风化雨观后感
2015/06/11 职场文书
2015年高三教学工作总结
2015/07/21 职场文书