uni.uploadFile h5上傳文(wén)件失敗完美解決方案

在小(xiǎo)程序開發項目中(zhōng)，用(yòng)到了uni-app框架，但因為(wèi)需要兼容h5，其中(zhōng)有(yǒu)圖片上傳，後台始終不能(néng)獲取到上傳的文(wén)件。

網上找了各種辦(bàn)法，發現很(hěn)多(duō)小(xiǎo)程序開發采用(yòng)uni-app框架都遇到了同樣的問題：uni.uploadFile h5上傳文(wén)件後台無法獲取，甚至還牽扯到了payload、form data傳值方式。

後來，經過創軟小(xiǎo)程序開發團隊不斷嘗試，發現隻要取消header設置即可(kě)，不知道為(wèi)什麽，反正這樣實現了。

小(xiǎo)程序開發的uni-app h5上傳文(wén)件代碼參考如下：

uni.uploadFile({
	url:'http://www.teamsfy.com',     // 後端api接口
	filePath: res.tempFilePaths[0], // uni.chooseImage函數調用(yòng)後獲取的本地文(wén)件路勁
	name:'file',     //後端通過'file'獲取上傳的文(wén)件對象
	formData: {
		'billGID': "xxxccc",  
		'token':"dddd"
	},
	success:(res) => {
		console.log(res)
	},
	fail: (err) => {
		console.log('uploadImage fail', err);
		uni.showModal({
			content: err.errMsg,
			showCancel: false
	        });
	}
});

當然，如果用(yòng)到了跨域，需要設置 OPTIONS 請求，因為(wèi)表單跨域上傳文(wén)件，會先發送OPTIONS請求驗證服務(wù)器是否可(kě)用(yòng)。asp.net 跨域，在web.config中(zhōng)配置如下

<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>

如果使用(yòng)的阿裏雲OSS服務(wù)，阿裏雲OSS前端AJAX直接上傳請參考阿裏雲OSS上傳請求403問題的完美解決方案。