之前公司需要写rn和小程序，由于公司图片存储用的是阿里的oss，但oss没有对应的sdk，所以开始的时候遇到不少的坑，后来发现可以通过PostObject使用表单上传文件到OSS。话不多说，直接上代码：
/**
*
* @param imgPath 图片路径
* @param success 成功回调
* @param fail 失败回调
* @constructor
*/
export const OssUpload = (imgPath: string, success: Function, fail: Function) => {
AsyncGet(ApiModule.utilityModel.oss_token, {}, true).promise.then((data) => {
const {
accessid,
host,
policy,
signature,
dir,
} = data;
let name = globalData.userId + "_" + fGetTs() + "." + 'jpg';
let file = {uri: imgPath, type: 'application/octet-stream', name: name};
let formData = new FormData();
formData.append('key', dir + name);
formData.append("OSSAccessKeyId", accessid);
formData.append("policy", policy);
formData.append("Signature", signature);
formData.append("file", file);
fetch(host, {
method: 'post',
'Content-Type': 'multipart/form-data; boundary=----theriverswine2017',
body: formData,
}).then((data) => {
LOG("图片上传成功");
LOG(JSON.stringify(data));
success(name);
}).catch((error) => {
LOG('图片上传失败' + JSON.stringify(error));
fail(error);
})
}).catch((error) => {
LOG('图片上传失败' + JSON.stringify(error));
fail(error);
})
};
参数介绍
| 参数 | 描述 |
|---|---|
| key | 上传文件的名称 |
| OSSAccessKeyId | Bucket 拥有者的Access Key Id |
| policy | policy规定了请求的表单域的合法性。不包含policy表单域的请求被认为是匿名请求，并且只能访问public-read-write的bucket。 |
| Signature | 根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性。 |
| file | 文件或文本内容，必须是表单中的最后一个域 |
更详细的参数可以参阅官方文档
小程序的上传
/**
* 上传头像
*/
function uploadPortrait(imgPath, success, fail) {
sendGetRequest('utils/oss_token_web', {}, true).then(result => {
const {
accessid,
host,
policy,
signature,
dir,
} = result;
var ts = Url.fGetTs();
let name = ts + "." + 'jpg';
wx.uploadFile({
url: 'https://' + host,
filePath: imgPath,
name: 'file',
formData: {
'key': dir + name,
'OSSAccessKeyId': accessid,
'policy': policy,
'Signature': signature,
}, success: function (res) {
console.log('成功')
console.log(res)
if (res.statusCode == 204) {
success(dir + name)
} else {
fail('网络连接失败')
}
}
, fail: function (res) {
console.log('失败了')
console.log(res)
fail('网络连接失败')
}
})
}).catch(error => {
fail('网络连接失败')
})
}
可以看出小程序和js的上传基本一致，只是需要用微信自带的wx.uploadFile APi。但小程序的上传请注意：
一定要在微信公众平台的后台配置上传路径。具体步骤：
1.登录https://mp.weixin.qq.com/
2.
image
若上传失败，可根据返回的错误信息，在官网的错误列表上找下，找出原因。
我在小程序上遇到的bug
小程序在上传图片的时候，有时候第一次上传会出现上传失败，返回为：
{statusCode:400,data:"",errMsg:"uploadFile:ok"}。
statusCode为400，但没有错误信息，完全不知道为什么出错。重新上传又好了，若有大佬知道，请教教小弟。
