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

上传文件为什么要用formData

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

实现效果

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

具体实现

1.在要上传图片的地方绑定filelist数据

2.通过ajax实现上传

我这里用了监听，UploadPicture是个上传方法，filelist在data里面是个数组，file用于接收图片地址

3.由于两个接口，也要解决跨域问题，所以配置代理，同时布置到上线地址的地方



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
})
}

这样就成功啦