前后分但文件上传与多文件上传,前端实现
发布日期:2021-06-29 15:52:10
浏览次数:3
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月24日 16时52分52秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
短暂的告别,马上再回来
2019-04-29
统治50年:为什么SQL在如今仍然很重要?
2019-04-29
测试是一场竞争,而数据每次都会获得胜利
2019-04-29
读心的测谎系统:究竟是骗子还是个天才?
2019-04-29
最大规模技术重建:数据库连接从15000个到100个以下
2019-04-29
复工之后:员工如何改善网络安全?
2019-04-29
70%求职者因此被拒,你还不避开这些“雷区”?!
2019-04-29
办法不在多,有用就行!用Dropout解决过度拟合问题
2019-04-29
色情演员识别?绝对是人脸识别最糟糕的应用……
2019-04-29
让强化学习逃离“乏味区域陷阱”,试着加点噪音吧!
2019-04-29
超详细Spring Boot面试问题集锦,死角一个不留!
2019-04-29
10个业余时间可完成的项目,助你飞速提升编码能力!
2019-04-29
网络爬虫初涉——用python爬取网络小说
2019-04-29
Pycharm+tensorflow dropout 学习(三)
2019-04-29
Pycharm+tensorflow CNN 学习(四)
2019-04-29
用python暴力破解压缩包密码
2019-04-29
基于OpenCV 将图片进行预处理,转变为MNIST图片格式
2019-04-29
PyCharm+Tensorflow CNN调用训练好的模型进行预测 (五)
2019-04-29
物联网平台Node-red初涉——访问搭建的简易服务器
2019-04-29
2020-10-27
2019-04-29