注意
一般情况上传照片有两种方式:
- 本地图片转换成base64,然后通过普通的post请求发送到服务端。
操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法
使用 - 通过form表单提交。
form表单提交图片会刷新页面,可以实现无刷新提交数据。
可以把form绑定到一个隐藏的iframe上,提交表单。
或者使用FormData
,FormData对象用以将数据编译成键值对
关于FormData https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
但微信小程序不支持base64格式上传,使用的是小程序的apiwx.uploadFile
其类似于使用FormData
来上传图片
如果是web端重构为小程序,wx.uploadFile
使用得当,后端不需要任何修改
使用方法
web
var formData = new FormData()
formData.append('file', file) //注意第一个参数是文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
var xhr = new XMLHttpRequest()
xhr.open('POST', upURL)
xhr.onreadystatechange = e => {
//一些逻辑代码
}
xhr.send(formData)
小程序
wx.uploadFile({
url: upurl,
filePath: file.path, //wx.chooseImage的success回调函数的tempFiles参数,每一项是一个 File 对象
name: 'file', //和formData.append第一个参数一样
header: {
"Content-Type": "multipart/form-data" //表单格式上传,必须
},
success:(res)=>{
console.log(res)
},
fail:(err)=>{
console.log(err)
}
})