web端重构微信小程序 图片上传

注意

一般情况上传照片有两种方式：

1. 本地图片转换成base64，然后通过普通的post请求发送到服务端。
   　操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法
   　使用
2. 通过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)
     }  
})