vue用手动上传图片(vue上传图片文件的多种实现方法)
类别:编程学习 浏览量:1277
时间:2022-04-01 01:30:34 vue用手动上传图片
vue上传图片文件的多种实现方法最开始百度到各种加headers,最后发现没什么用,有大兄弟知道的可以告知一下哦,记个随笔
原始input标签form表单上传
<input type="file" @change="onchangemd"> methods: { onchangemd(e){ console.log(e.target.files)//这个就是选中文件信息 let formdata = new FormData() Array.from(e.target.files).map(item => { console.log(item) formdata.append("file", item) //将每一个文件图片都加进formdata }) axios.post("接口地址", formdata).then(res => { console.log(res) }) } }
当看到二进制提交数据,就成功了(binary)
这种也是成功的(是二进制的展开数据。因为有些浏览器不显示binary)
上图可以看出 传统上传文件是以二进制的格式formdata格式提交
用elementui自带的el-upload上传
<el-upload action="" :on-change="handleelchange" :auto-upload="false" list-type="picture-card"> <i class="el-icon-plus"></i> </el-upload> handleelchange(file, fileList) { console.log(file, fileList) let formdata = new FormData() fileList.map(item => { //fileList本来就是数组,就不用转为真数组了 formdata.append("file", item.raw) //将每一个文件图片都加进formdata }) axios.post("接口地址", formdata).then(res => { console.log(res) }) },
不用设置请求头等(直接用FormData格式提交就行),当看到formdata数据为二进制就说明提交正常(binary),同样有些浏览器不显示binary,以------WebKitFormBoundaryXoZpi2juymcNoW0l 开头的这种也是提交正常的
注意fileList数组中的raw才是真实文件数据,如果直接用item而不是item.raw,那么会报500错误,并且formdata中的数据不是二进制而是对象格式
fileList.map(item => { formdata.append(“file”, item) //错误实例。要用item.raw })
elementui
elementui实现一次性上传多张图片
注意: 管用思维,点击提交然后触发表单提交事件,然后表单提交事件中发起请求。
结果: 上传每张图片都需要发起请求,即会发起多次请求
处理: 在submit阶段(即this.$refs.xxx.submit() 这步就发起请求),在提交函数中仅仅只进行图片获取
多张图片上传最后一个注意点: 多张图片的这个file不能写死,formdata.append(“file”, item) ,写为每张图片的指定name,不然会覆盖。
<el-upload ref="elupload" action="" multiple :auto-upload="false" :http-request="handleupload" list-type="picture-card"> <i class="el-icon-plus"></i> </el-upload> <button @click="uploadelupload">点击提交</button> methods:{ uploadelupload() { let formdata = new FormData() this.$refs.elupload.submit(); // 这里是执行文件上传的函数,其实也就是获取我们要上传的文件 this.fileList.forEach(item => { formdata.append("file", item) //将每一个文件图片都加进formdata }) formdata.append("score", 4) axios.post("接口地址", formdata).then(res => { console.log(res) }) }, handleupload(param) { this.fileList.push(param.file);// 一般情况下是在这里创建FormData对象,但我们需要上传多个文件,为避免发送多次请求,因此在这里只进行文件的获取,param可以拿到文件上传的所有信息 }, }
elementui提交图片以及其他数据
- 后端让传图片、以及其他数据。
- 注意图片文件等:必须使用formdata传过去
- 其他数据等:用普通方式传递
代码与上述大体相同、这里就只写axios请求格式 let formdata = new FormData() formdata.append("file", item) //将每一个文件图片都 axios({ method: "post", url: "接口地址", data: formdata, params: { score: 4, content: "xxxxx", order_detail_id: 24, token: "xxxx" } }).then(res => { console.log(res) })
总结
到此这篇关于vue上传图片文件的文章就介绍到这了,更多相关vue上传图片文件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue 组件布局(Vue实现固定底部组件的示例)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue 优雅写法(使用vue实现手写签名功能)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue 底层原理(浅谈Vue插槽实现原理)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
热门推荐
- php哪个函数具有字符串截取功能(php字符串截取函数mb_substr用法实例分析)
- 云服务器是什么技术(云服务器系统选择的依据是什么?)
- python生成文本文件(python+os根据文件名自动生成文本)
- 织梦程序怎么上传到空间(织梦上传服务器后出现数据连接失败是怎么回事如何解决)
- mysql编码设置
- sqlserver带参数的存储过程(SQL Server 日期和时间的内部存储过程)
- 虚拟云服务器如何安装宝塔(云服务器宝塔面板的安装图文教程详解)
- sqlserver常见函数(SQL Server之JSON 函数详解)
- hadoop集群怎么配置(Hadoop3.2.0集群搭建常见注意事项)
- SQLServer中JSON文档型数据的查询问题解决(SQLServer中JSON文档型数据的查询问题解决)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9