vue-用formData实现单张图片上传

上传文件为什么要用formData

1.使用application/x-www-form-urlencoded:此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端,二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了,专门用于有效的传输文件。
2.使用FormData的最大优点就是可以异步上传二进制文件

实现效果

vue-用formData实现单张图片上传
vue-用formData实现单张图片上传

vue-用formData实现单张图片上传
至于这里为什么有两个接口,解释一下:
1.如果一个接口接收上传的文件和图片,会造成服务器挤压过载
2.两个接口,第一个接口用于接收,第二个接口用于存储,防止黑客删除数据,黑客入侵时第一个接口暴露,第二个接口黑客看不到
3.两个接口之间的传递迅速,可以不用做跨域操作

具体实现

1.在要上传图片的地方绑定filelist数据
vue-用formData实现单张图片上传
2.通过ajax实现上传
vue-用formData实现单张图片上传
我这里用了监听,UploadPicture是个上传方法,filelist在data里面是个数组,file用于接收图片地址

3.由于两个接口,也要解决跨域问题,所以配置代理,同时布置到上线地址的地方
vue-用formData实现单张图片上传
vue-用formData实现单张图片上传
vue-用formData实现单张图片上传
4.UploadPicture方法
export function UploadPicture(file) {
var formdata = new FormData()
formdata.append(‘name’, 'upload’)//新增属性和属性名
formdata.append(‘f’, file)//第一个参数是接口中存放图片的名字,第二个参数是传过来的图片路径
return request({
url:
process.env.VUE_APP_API
**** +
‘**************************’,
method: ‘post’,
headers: { ‘Content-Type’: ‘multipart/form-data’ },
data: formdata
})
}

这样就成功啦

上一篇:formData 通过ajax模拟表单上传


下一篇:ajax提交表单文件后台获取不到问题