跳到主要内容
技术分享

uni.uploadFile h5上传文件失败完美解决方案

uni.uploadFile h5上传文件后台无法获取的问题在网上还很普遍,今天创软小程序开发团队在项目开发中也遇到了,那么,小程序开发采用uni-app框架如何解决uni.uploadFile h5上传文件后台无法获取的问题呢?创软科技技术团队将为你解答。

本文发布于上述日期,内容与截图以当时版本为准;当前服务范围和联系方式请以本站最新页面为准。

uni.uploadFile h5上传文件失败完美解决方案

小程序开发项目中,用到了uni-app框架,但因为需要兼容h5,其中有图片上传,后台始终不能获取到上传的文件。

网上找了各种办法,发现很多小程序开发采用uni-app框架都遇到了同样的问题:uni.uploadFile h5上传文件后台无法获取,甚至还牵扯到了payload、form data传值方式。

后来,经过创软小程序开发团队不断尝试,发现只要取消header设置即可,不知道为什么,反正这样实现了。

小程序开发的uni-app h5上传文件代码参考如下:

uni.uploadFile({
	url:'https://www.teamsfy.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问题的完美解决方案

项目沟通

需要把内容里的想法落到企业系统中?

我们可以从业务流程、现有系统和数据条件开始讨论,判断适合定制开发、系统集成还是AI能力接入。

18981997898

项目咨询

获取 AI 或软件定制建议

留下基本信息,我们先按业务场景判断适合的技术路线。

欢迎直接电话或微信沟通,也可以先到联系页查看办公地址和项目准备清单。

成都创软科技微信客服二维码 微信扫码联系