上传文件为什么要用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
})
}