在小程序開發(fā)項目中,用到了uni-app框架,但因為需要兼容h5,其中有圖片上傳,后臺始終不能獲取到上傳的文件。
網(wǎng)上找了各種辦法,發(fā)現(xiàn)很多小程序開發(fā)采用uni-app框架都遇到了同樣的問題:uni.uploadFile h5上傳文件后臺無法獲取,甚至還牽扯到了payload、form data傳值方式。
后來,經(jīng)過創(chuàng)軟小程序開發(fā)團隊不斷嘗試,發(fā)現(xiàn)只要取消header設(shè)置即可,不知道為什么,反正這樣實現(xiàn)了。
小程序開發(fā)的uni-app h5上傳文件代碼參考如下:
uni.uploadFile({ url:'http://m.sustain-economy.com', // 后端api接口 filePath: res.tempFilePaths[0], // uni.chooseImage函數(shù)調(diào)用后獲取的本地文件路勁 name:'file', //后端通過'file'獲取上傳的文件對象 formData: { 'billGID': "xxxccc", 'token':"dddd" }, success:(res) => { console.log(res) }, fail: (err) => { console.log('uploadImage fail', err); uni.showModal({ content: err.errMsg, showCancel: false }); } });
當然,如果用到了跨域,需要設(shè)置 OPTIONS 請求,因為表單跨域上傳文件,會先發(fā)送OPTIONS請求驗證服務(wù)器是否可用。asp.net 跨域,在web.config中配置如下
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer>
如果使用的阿里云OSS服務(wù),阿里云OSS前端AJAX直接上傳請參考阿里云OSS上傳請求403問題的完美解決方案。