前后分但文件上传与多文件上传,前端实现
发布日期:2021-06-29 15:52:10
浏览次数:4
分类:技术文章
本文共 1719 字,大约阅读时间需要 5 分钟。
需求
前后分离的开发模式下,实现前端文件上传,包括单文件与多文件
后端接口
/upload
单文件上传
- 上传成功:
{ status: "ok", url:"http://localhots:8080/file/xxx"}
失败:
{ status: "failed", msg:"" }
/uploadMul
多文件上传
- 上传成功:
{ status: "ok", upload: 2, succeed:1, detail: [ { staus: "ok", url:"http://localhots:8080/file/xxx" }, { staus: "failed", msg:"" } ]}
失败:
{ status: "failed", msg:"" }
前端代码
核心代码
- 单文件
uploadFile:function(){ var formData = new window.FormData() formData.append('file',document.querySelector('input[type=file]').files[0]) var options = { url:"http://localhost:8080/upload", data: formData, method: 'post', headers:{ 'Content-Type':'multipart/form-data' } } //send request axios(options).then( (res)=>{ console.log(res) } ).catch( (error)=>{ console.log(error)} )}
- 多文件
uploadMulFile:function(){ var formData = new window.FormData() var files= document.querySelector('#mulFile').files; for (let index = 0; index < files.length; index++) { formData.append('files',files[index]) } var options = { url:"http://localhost:8080/uploadMul", data: formData, method: 'post', headers:{ 'Content-Type':'multipart/form-data' } } //send request axios(options).then( (res)=>{ console.log(res) } ).catch( (error)=>{ console.log(error)} ) }}
完整html文件代码
- 使用了vue
Document
转载地址:https://console.blog.csdn.net/article/details/112061297 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月07日 22时48分46秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
sql注入: 判断注入点类型
2019-04-29
千人千面Elasticsearch实战学习笔记
2019-04-29
最大子数组问题(递归)(java)
2019-04-29
2021年第十二届蓝桥杯软件赛省赛第二场 C/C++ 大学 A 组
2019-04-29
2020年哨兵数据批量下载(USGS)
2019-04-29
简单3步快速生成千万级别mysql测试数据库,模拟电商数据
2019-04-29
EasyDSS平台接入设备量过多的情况下如何进行批量推流测试?
2019-04-29
mysql数据库操作基础
2019-04-29
Mariadb基础管理
2019-04-29
awk 的内置变量 NF、NR、FNR、FS、OFS、RS、ORS
2019-04-29
CentOS系统内核升级攻略
2019-04-29
linux系统时区修改(Debian的主机和docker)
2019-04-29
docker-compose 安装
2019-04-29
crontab 定时任务
2019-04-29
查看docker veth pair与宿主机上网卡的对应关系
2019-04-29
使用 GitLab CI 进行持续集成的一些踩坑
2019-04-29