分享最實(shí)用的技術(shù),創(chuàng)造更大的價(jià)值

uni.uploadFile h5上傳文件失敗完美解決方案

uni.uploadFile h5上傳文件失敗完美解決方案

小程序開(kāi)發(fā)項(xiàng)目中,用到了uni-app框架,但因?yàn)樾枰嫒輍5,其中有圖片上傳,后臺(tái)始終不能獲取到上傳的文件。


網(wǎng)上找了各種辦法,發(fā)現(xiàn)很多小程序開(kāi)發(fā)采用uni-app框架都遇到了同樣的問(wèn)題:uni.uploadFile h5上傳文件后臺(tái)無(wú)法獲取,甚至還牽扯到了payload、form data傳值方式。


后來(lái),經(jīng)過(guò)創(chuàng)軟小程序開(kāi)發(fā)團(tuán)隊(duì)不斷嘗試,發(fā)現(xiàn)只要取消header設(shè)置即可,不知道為什么,反正這樣實(shí)現(xiàn)了。


小程序開(kāi)發(fā)的uni-app h5上傳文件代碼參考如下:

uni.uploadFile({
	url:'http://m.fzsep.cn',     // 后端api接口
	filePath: res.tempFilePaths[0], // uni.chooseImage函數(shù)調(diào)用后獲取的本地文件路勁
	name:'file',     //后端通過(guò)'file'獲取上傳的文件對(duì)象
	formData: {
		'billGID': "xxxccc",  
		'token':"dddd"
	},
	success:(res) => {
		console.log(res)
	},
	fail: (err) => {
		console.log('uploadImage fail', err);
		uni.showModal({
			content: err.errMsg,
			showCancel: false
	        });
	}
});



當(dāng)然,如果用到了跨域,需要設(shè)置 OPTIONS 請(qǐng)求,因?yàn)楸韱慰缬蛏蟼魑募?,?huì)先發(fā)送OPTIONS請(qǐng)求驗(yàn)證服務(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直接上傳請(qǐng)參考阿里云OSS上傳請(qǐng)求403問(wèn)題的完美解決方案


聯(lián)系
QQ
電話
咨詢電話:189-8199-7898
TOP