当前位置:首页 > 技术分享

uni.uploadFile h5上传文件失败完美解决方案 h5上传文件后台无法获取

admin4年前 (2022-09-07)技术分享5037

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
uni.uploadFile({
    url:'http://www.test.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中配置如下

1
2
3
4
5
6
7
8
9
<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问题的完美解决方案


转自:http://www.teamsfy.com/html/r_28d3748f7a0449d8aeac8dd78a547f6e.html

扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/413.html

分享给朋友:

“uni.uploadFile h5上传文件失败完美解决方案 h5上传文件后台无法获取” 的相关文章

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG…

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版:Windows 10X是Windows 10操作系统的新版本,主要针对双屏电脑。由于即将运行Windows 10X的双屏电脑(例如即将面世的Surface Neo)的开发遇到挫折,…

百度云网盘高速下载方法[测试可用]

百度云网盘高速下载方法[测试可用]

大前提这是一个油猴脚本,安装脚本之前,必须先安装油猴浏览器扩展(如已安装则跳过):【第一步】下载油猴 --> 如有提示安装,则直接安装即可,否则继续执行第二步【第二步】安装油猴 --> 参考其中章节:&nbs…

阿里云盘 分享脚本 抢先实现文件分享功能

Win端基本所有浏览器均可进行安装安装地址:https://bbs.tampermonkey.net.cn/thread-427-1-1.html如何安装:Tampermoneky安装:谷歌浏览器参考:https://bbs.tamperm…

msixbundle怎么打开?win10后缀.MSIX安装包怎么安装使用

msixbundle怎么打开?win10后缀.MSIX安装包怎么安装使用

扩展名为 .msix的文件是Windows应用程序安装程序。微软推出的MSIX 作为EXE,MSI甚至AppX 软件包的替代品。在Windows 10中打开一个.MSIX 文件并开始安装打包的应用程序,只需双击该文件即可。但有也有不少朋友会…

微软 Win11 安卓子系统已支持运行支付宝等 APK 应用(附手动侧载安装教程攻略)

微软 Win11 安卓子系统已支持运行支付宝等 APK 应用(附手动侧载安装教程攻略)

微软博客宣称,Windows 11 上 安卓子系统运行 Android  应用程序的第一个预览版现已提供给美国 Beta 频道的 Windows 内部人员。Windows 11 安卓子系统支…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。