vue怎么去做上传图片功能,vue上传图片到后端
本文主要介绍了vue上传图片文件的相关信息，并介绍了使用原始输入标签表单、elementui上传el-upload、elementui一次上传多张图片的方法。有需要的可以参考一下。
一开始百度了各种标题，最后发现没用。如果你知道什么，请告诉我，并写一篇文章。
原始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
})
elementui
elementui实现一次性上传多张图片
注意：使用您的思维，单击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，内容：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。