uniapp使用阿里OSS上传
上传并不困难,纯纪录用1.配置Bucket跨域访问(js上传都需要配置)登录OSS管理控制台。单击设置。单击创建规则,配置如下图所示。如是小程序,则需要配置小程序的上传域名白名单,具体可以看这篇文章《小程序配置域名白名单》2.使用Web端直传实践方案Demo进行上传测试下载应用服务器代码将文件解压,并打开upload.js文件修改upload.js中的配置信息。accessId : 设置您的Acc
·
此上传方法并不困难,纯纪录用
1.配置Bucket跨域访问(js上传都需要配置)
- 登录OSS管理控制台。
- 单击设置。
- 单击创建规则,配置如下图所示。
如是小程序,则需要配置小程序的上传域名白名单,具体可以看这篇文章《小程序配置域名白名单》
2.使用Web端直传实践方案Demo进行上传测试
- 下载应用服务器代码
- 将文件解压,并打开upload.js文件
- 修改upload.js中的配置信息。
- accessId : 设置你的AccessKeyId。
- accessKey : 设置你的AessKeySecret。
- host: 格式为bucketname.endpoint,例如bucket-name.oss-cn-hangzhou.aliyuncs.com。关于Endpoint的介绍,请参见Endpoint访问域名。
- expiration:设置Policy的失效时间,如果超过失效时间,就无法通过此Policy上传文件。
3.进行上传测试
- 在浏览器打开index.html文件
- 单击选择文件,选择指定类型的文件,单击开始上传。
4.获取上传需要的签名(signature)和加密策略(policy)。
按F12开启web调试,在请求中的Form Data中获取signature和policy。
5.使用uniapp上传图片
使用chooseImageApi选择本地图片后上传
uni.chooseImage({
count: 1, //默认9
sizeType: ['compressed'],
sourceType: ['album'],
success: res => {
let tiemr = new Date();
let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr.getDate();
address = 'zskp/userHead/' + address + '/';
var imageSrc = res.tempFilePaths[0];
let str = res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.'));
let nameStr = address + tiemr.getTime() + str;
let ossUrl = 'http://xxx.xxxxxxxxxxxxxxxxxxxxxx.xxx/';
uni.uploadFile({
url: ossUrl,//输入你的bucketname.endpoint
filePath: imageSrc,
fileType: 'image',
name: 'file',
formData: {
name: nameStr,
key: nameStr,
policy: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', // 输入你获取的的policy
OSSAccessKeyId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', // 输入你的AccessKeyId
success_action_status: '200', // 让服务端返回200,不然,默认会返回204
signature: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' // 输入你获取的的signature
},
success: res => {
if(res.statusCode == '200'){
consonle.log(ossUrl + nameStr);
}else{
consonle.log(res);
}
}
});
}
});
上传成功的状态码为200时,则上传成功,如果未成功,请检查对应bucket是否设置跨域,已及AccessKeyId和签名(signature)和加密策略(policy)是否填写正确。
END
更多推荐
已为社区贡献3条内容
所有评论(0)