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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
vue实现购物车选择功能
Jan 10 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 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(视频)Http下载
2006/12/12 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
js tab 选项卡
2009/04/26 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
商场中秋节活动方案
2014/02/07 职场文书
出纳员岗位职责
2014/03/13 职场文书
项目经理聘任书
2014/03/29 职场文书
产品质量承诺范本
2014/03/31 职场文书
售房协议书
2014/08/19 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers