目录
微信小程序上传阿里云
wx.chooseImage({
sizeType:["compressed"],
sourceType:["album"],
success: function(res) {
console.log("选择图片后的值为");
console.log(res);
console.log(res.tempFilePaths[0]);
wx.uploadFile({
url: "xxxxxxxxxxxxxxxxxxxx",
filePath: res.tempFilePaths[0],//最后一张传入
header: {
"Content-Type": "multipart/form-data",
},
name: 'file',
method: 'post',
formData: {
key:"xxxxxxxxxxxxxxxxxxxxxx",
OSSAccessKeyId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
policy: "xxxxxxxxxxxxxxxxxxxxxx",
signature: "xxxxxxxxxxxxxxxxxxxx",
success_action_status:"200"
},
success: function (res) {
console.log("上传图片后,阿里云返回的值为")
console.log(res);
},
fail: function (res) {
console.log("上传失败");
console.log(res);
}
})
},
})
url:阿里云OSS的地址
OSSAccessKeyId,policy,signature如何获取呢?
下载好之后目录是这样的。(下图)
用浏览器打开 index.html 文件。(如下图)
点击 upload.js 文件,修改配置。
把上图选中的三个参数换成你自己的。
accessid,accesskey怎么获得? --登录阿里云OSS平台查看
配置完成后,点击上传文件
然后打开开发者工具,可以按F12打开,也可以在web浏览器设置中打开(大部分都是浏览器右上角设置=>更多工具),打开network=>header 如下图,可以获取到服务器返回的OSSAccessKeyId,policy,signature值。
配置Bucket跨域访问
1. 登录OSS管理控制台。
2. 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
3. 单击基础设置页签,找到跨域设置区域,然后单击设置。
4. 单击创建规则,配置如下图所示。
配置外网域名到小程序的域名白名单
1. 登录OSS管理控制台。
2. 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
3. 在访问域名区域查看Bucket域名。
4. 登录微信小程序平台,配置小程序的上传域名白名单(注意:这一步操作的是微信小程序,需要登录微信公众平台配置)。
上传报错(返回400,403,405,204)
报错信息 | 解决方案 |
---|---|
204 | 在formData: {}中添加 success_action_status:“200” 可以参考文章开篇的代码 |
400 | 添加上传的 Key 值,路径也要写正确,/images/test.png 为错误写法(最前面多了个斜杠),正确写法success images/test.png ;另外,阿里云OSS一次只允许上传一张照片。 |
403 | 检测 OSSAccessKeyId,policy,signature 是否填写正确; expiration已过期(详见下面) |
405 | URL中添加服务器地址 http://post-test.oss-cn-hangzhou.aliyuncs.com 而不能写成 http://post-test.oss-cn-hangzhou.aliyuncs.com/images/test.png这种形式 |
关于expiration过期的问题(403)
这个问题和下载的应用服务器代码有关。
如下图:
把未失效的policy,signature等值替换即可。