阿里 OSS图片上传 —— 原生JS中使用
前言这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档.然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.这里给出两个方案:原生JS(包括jQuery)里如何使用OSS图片上传二是Vue项目如何使用OSS图片上传(晚点写)OSS 简介及应用场景介绍1. 全称: Object Storage Service,简称 OS
·
前言
这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档.
然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.
这里给出两个方案:
- 原生JS(包括jQuery)里如何使用OSS图片上传
- 二是Vue项目如何使用OSS图片上传(晚点写)
OSS 简介及应用场景介绍
1. 全称: Object Storage Service,简称 OSS,是阿里云提供的海量、安全、低成本、高可靠的云存储服务。
2. 它具有与平台无关的RESTful API接口,能够提供99.999999999%的服务持久性。(牛皮就完事了)
使用场景:
- 图片上传
- 视频上传
原生JS使用OSS图片上传
1. 方法的定义
// 方法的定义
window.multipartUpload = function multipartUpload(storeAs, file, filename, filetype) {
var client = new OSS.Wrapper({
accessKeyId: 'youID', //
accessKeySecret: 'youSecret', // accessKeyId和accessKeySecret是OSS的访问密钥
endpoint: 'http://xxxxx', // OSS对应的区域地址
bucket: 'osshanyatemp' // 容器
});
// 这里可以做一些控制 大小,格式等
if (file.size/1024/1024 < 2 || file.size/1024/1024 > 5) {
layer.msg("照片大小只能在2~5M之间");
return;
}
console.log(file);
client.multipartUpload(storeAs, file).then(function (result) {
var reviewUrl = result.url ? result.url : result.res.requestUrls[0].split('?')[0];
// 这里可以拿到阿里云返回的临时地址 需要传给后台
console.log(reviewUrl)
}).catch(function (err) {
console.log(err);
});
}
2. 方法的调用
// 监听图片上传的元素change事件
document.getElementById('uploadImg').addEventListener('change', function (e) {
var upload_num = document.getElementById('uploadImg').files.length;
var ff = document.getElementById('uploadImg').files;
// 做一些相关判断
if (ff.length > 8) {
layer.msg("最多只能上传8张");
return;
}
// 由于是多图上传,所以要用到循环
for (var i = 0; i < upload_num; i++) {
var filename = ff[i].name;
var filetype = ff[i].type;
// 生成10位随机数 原因是阿里云的机制问题
// 当我上传完某张图片之后,不可上传同名的图片
// 所以加了个随机数,每张图的名字都不一样
let randomNum = getRandom(10);
let regStr = palindrome(ff[i].name)
filename = randomNum + regStr;
// 图片重命名
Object.defineProperty(ff[i], 'name', {
value: filename,
writable: true,
configurable: true,
enumerable: true,
});
// 限制格式 png jpeg
if (
filename.indexOf("jpeg") != -1 || filename.indexOf('JPEG') != -1
) {
var storeAs = "pic/" + new Date().getTime() + '_' + i + file.name;
// 方法调用
window.multipartUpload(storeAs, ff[i], filename, filetype);
} else {
alert('上传的格式不正确');
return;
}
}
});
更多推荐
已为社区贡献12条内容
所有评论(0)