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

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

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

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

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

uni.uploadFile({

url: 'http://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问题的完美解决方案。

转载于： http://www.teamsfy.com/html/r_da159c3b48f94f30927e899651064c47.html

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

在使用阿里云OSS服务时，会用到跨域AJAX上传，上传时报403错误，之前遇到过此类问题并成功解决了，但时间长了遗忘，因此记录下来以备后续学习了解ajax跨域上传OSS。ajax跨域上传首先会发送options请求，成功后再进行上传，那么，如何解决阿里云OSS跨域AJAX上传OPTIONS请求403问题？只需简单设置，流程如下：进入存储空间（Bucket） ——> 基础设置 ——> 跨域设置 ——> 添加规则，进入下图所示设置以上规则后，就成功解决了阿... 阿里云 OSS 是 阿里云 提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持容量和处理能力弹性扩展。 1.bucket ：类似本地的一个文件夹 2.object ： oss 存储数据的基本单元，类似本地的一个文件。 3.region： oss 存储的数据中心所在区域 4.Endpoint： oss 对外服务的访问域名， oss 以 http api 提供服务，不同 region 的 edpoint 不同。 5.AccessKey：访问秘钥，简称 AK,包括 Acc

uni - app 版本升级后出现下面的问题，起初以为是 OSS 的问题，后来发现旧版本可以上传成功，新版本上传报错，所以以为是版本的问题，下了好几个版本试，发现都不可以。折腾来折腾去最后发现注释一行代码就好了。 OSS 实现使用插件 oss util 控制台输出 "data": "https://xxxx. oss -cn-hangzhou.aliyuncs.com", "statusCode": 403 , "errMsg": " upload File :ok" 找到crypto.js文件，注释以下代码

处理方法: 您好，您这个是跨域，不是鉴权的问题，前端上传的话，一般都是要求跨域的，跨域设置方法是： https://help.aliyun.com/document_detail/31903.html?spm=a2c4g.11174283.6.1124.369f7da2kWLpA2 设置内容如下：允许method:全部勾选允许headers：* 暴露header： x- oss -request-id 其他保持默认 Browser.js 官方文档：https://help.aliyun.com/document_detail/64040.html GITHUB地址：https://gitee.com/mirrors/ali- oss GITEE镜像地址：https://github.com/ali-sdk/ali- oss 示例：列出所有对象（测试bucket，对象数量较少） </head> <body>&l

问了 阿里云 客户，然并卵！浪费时间！发一堆文档给我看！我要看了解决，早就看了解决了！看是否配置了跨域设置。我自己是配置了的，还是报错 403 。于是我用python代码requests尝试，竟然可以成功！但是前端vue的同事调用一直 403 报错！经过对比2个的区别，python代码里没有设置Content-Type，在Postman里试了下，果断如此。

错误还原：我在做 OSS 文件上传头像时，发现头像的图片文件可以上传成功，也可以返回文件的路径。但是前端在拿着后端返回的文件图片路径去访问这个图片时，Response中的错误码为 403 。找了一下网上的资料，发现添加了这两行代码，问题就解决了:: ObjectMetadata objectMetadata = new ObjectMetadata(); objectMetadata.setContentType("image/jpg"); 阿里云 个人文件完整代码如下 @Service public class

import java.io. File ; import com.aliyun. oss . OSS ; import com.aliyun. oss . OSS ClientBuilder; import com.aliyun. oss .model.PutObjectResult; public class Oss Utils { private static String endpoint = "yourEndpoint"; // OSS endpoint private static String accessKeyId = "yourAccessKeyId"; // AccessKeyId private static String accessKeySecret = "yourAccessKeySecret"; // AccessKeySecret private static String bucketName = "yourBucketName"; // bucket name // 上传文件 public static String upload File (String objectName, String file Path) { // 创建 OSS Client实例。 OSS oss Client = new OSS ClientBuilder().build(endpoint, accessKeyId, accessKeySecret); try { // 上传文件 到 阿里云 OSS PutObjectResult result = oss Client.putObject(bucketName, objectName, new File ( file Path)); // 获取文件下载链接 String file Url = oss Client.generatePresignedUrl(bucketName, objectName, // file key new Date(System.currentTimeMillis() + 3600L * 1000 * 24 * 365 * 10), // URL有效期 HttpMethod.GET // HTTP 请求方法 ).toString(); return file Url; } finally { // 关闭 OSS Client。 oss Client.shutdown(); 其中，`objectName`为文件在 OSS 上的唯一标识符，` file Path`为本地文件路径。在上传成功后，通过`generatePresignedUrl`方法获取文件下载链接，设置有效期可根据需要调整。