1. 程式人生 > >web端重構微信小程式 圖片上傳

web端重構微信小程式 圖片上傳

注意

一般情況上傳照片有兩種方式:

  1. 本地圖片轉換成base64,然後通過普通的post請求傳送到服務端。  操作簡單,適合小圖,以及如果想相容低版本的ie沒辦法用此方法  使用

但微信小程式不支援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)
     }  
})