• <nav id="ecmkk"></nav>
  • 分享最實用的技術,創造更大的價值

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

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

    小程序開發項目中,用到了uni-app框架,但因為需要兼容h5,其中有圖片上傳,后臺始終不能獲取到上傳的文件。


    網上找了各種辦法,發現很多小程序開發采用uni-app框架都遇到了同樣的問題:uni.uploadFile h5上傳文件后臺無法獲取,甚至還牽扯到了payload、form data傳值方式。


    后來,經過創軟小程序開發團隊不斷嘗試,發現只要取消header設置即可,不知道為什么,反正這樣實現了。


    小程序開發的uni-app h5上傳文件代碼參考如下:

    uni.uploadFile({
    	url:'http://www.newlifeoldworld.com',     // 后端api接口
    	filePath: res.tempFilePaths[0], // uni.chooseImage函數調用后獲取的本地文件路勁
    	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
    	        });
    	}
    });



    當然,如果用到了跨域,需要設置 OPTIONS 請求,因為表單跨域上傳文件,會先發送OPTIONS請求驗證服務器是否可用。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服務,阿里云OSS前端AJAX直接上傳請參考阿里云OSS上傳請求403問題的完美解決方案。


    聯系
    QQ
    電話
    咨詢電話:189-8199-7898
    TOP
    亚洲中文字幕aⅴ天堂
  • <nav id="ecmkk"></nav>