原始input标签form表单上传
输入类型='file' @change='onchangemd ' 方法:{ onchangemd(e){ Console.log(e.target.files)//这是选中的文件信息 假设formdata=新表单数据() Array.from(e.target.files)地图(项目={ console.log(项目) Formdata.append('file '，item) //将每个文件图片添加到Formdata中 }) Axios.post('接口地址'，formdata)然后(res={console.log (res)}) } } 当你看到二进制提交数据，你就成功了(二进制) 这也是成功的(是二进制扩展数据因为有些浏览器不显示二进制) 上图可以看出传统上传文件以二进制格式formdata格式提交用elementui自带的el-upload上传
El-upload action=' ':on-change=' handleelchange ':auto-upload=' false ' list-type=' picture-card ' i class='el-icon-plus'/i /El-上传 handleelchange(文件，文件列表){ console.log(文件，文件列表) 假设formdata=新表单数据() file.map (item={//FileList是一个数组，所以不需要是真数组 Formdata.append ('file '，item . raw)//将每个文件图片添加到Formdata中 }) Axios.post('接口地址'，formdata)然后(res={console.log (res)}) }, 不需要设置请求头(直接以formdata格式提交即可)当你看到FormData数据是二进制的，说明提交是正常的(二进制)同样，有些浏览器不显示二进制，以-WebKitFormBoundaryXozpi 2 juymcnow 0 l开头的也很正常 注意，文件列表数组中的原始数据是真实的文件数据如果直接用item代替item.raw，会报错500，formdata中的数据不是二进制而是对象格式 fileList.map(item={ Formdata.append ("file "，item)//错误实例使用item.raw }) elementuielementui实现一次性上传多张图片
注意:使用您的思维，单击Submit并触发表单提交事件，然后在表单提交事件中发起请求 结果:上传每张图片，需要发起一个请求，即会发起多个请求 处理:在提交阶段(也就是这个$refs.xxx.submit()发起请求)，在submit函数中只采集图像 上传多张图片最后注意一点:这个多张图片的文件不能写死，formdata.append("file "，item，item)，写成每张图片的指定名称，否则会被覆盖 El-upload ref=' elupload ' action=' ' multiple:auto-upload=' false ':http-request=' handle upload ' list-type=' picture-card ' i class='el-icon-plus'/i /El-上传 按钮@click='uploadelupload '点击提交/按钮 方法:{ uploadelupload() { 假设formdata=新表单数据() 这个$ refs . elupload . submit()；//这里是上传文件的函数，其实就是获取我们想要上传的文件 this.fileList.forEach(item={ Formdata.append('file '，item) //将每个文件图片添加到Formdata中 }) formdata.append('score '，4) Axios.post('接口地址'，formdata)然后(res={console.log (res)}) }, handleupload(param) { this . file list . push(param . file)；//一般来说，FormData对象是在这里创建的，但是我们需要上传多个文件为了避免发送多个请求，这里只获取文件，param可以获取文件上传的所有信息 }, }elementui提交图片以及其他数据
让后端传输图片等数据 注意图片文件等您必须使用formdata来发送它们 其他数据等以普通方式传输 代码基本和上面一样，这里只写axios请求格式 假设formdata=新表单数据() Formdata.append('file '，item) //制作每个文件的图片 axios({ 方法:' post '， Url:“接口地址”， 数据:formdata， 参数:{分数:4，内容: 'xxxxx，order_detail_id: 24，token: 'xxxx' }
}).然后(res={ console.log(res) })
总结
关于vue上传图片文件的这篇文章到此结束。有关vue上传图像文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。