前端上传图片到阿里云oss服务器简单上传和分片上传
目录
前端上传图片到阿里云oss服务器(简单上传和分片上传)
前端上传文件到阿里云oss服务器(简单上传和分片上传)
最近做的项目用到了阿里云oss服务器,所以在此记录一下。
1.首先需要申请阿里云oss服务器,然后拿到相关的配置参数
2.然后在js文件中封装上传相关方法就可以了,此处用的layui的upload方法,通过日期创建文件目录和随机id防止图片存储重复。
3.记得要引入aliyun-oss-sdk.min.js。
直接上代码吧~
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
region: 'yourRegion',
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: 'yourSecurityToken',
// 填写Bucket名称。
bucket: 'examplebucket'
});
const headers = {
// 指定该Object被下载时网页的缓存行为。
// 'Cache-Control': 'no-cache',
// 指定该Object被下载时的名称。
// 'Content-Disposition': 'oss_download.txt',
//Object生成时会创建相应的ETag ,ETag用于标识一个Object的内容。
// 对于PutObject请求创建的Object,ETag值是其内容的MD5值。
// 对于其他方式创建的Object,ETag值是基于一定计算规则生成的唯一值,但不是其内容的MD5值。
//'ETag':'',
// 指定PutObject操作时是否覆盖同名Object
'x-oss-forbid-overwrite': true,
}
const options = {
// 获取分片上传进度、断点和返回值。
progress: (p, cpt, res) => {
console.log(p);
//实时返回上传进度(百分比实时渲染,upload-progress容器ID名)
// console.log(p);
var progress = p*100;
// $('#upload-progress').text(progress+'%')//可以在页面设置进度条
},
// 设置并发上传的分片数量。
parallel: 4,
// 设置分片大小。默认值为1 MB,最小值为100 KB。
partSize: 1024 * 1024,
// headers,
// 自定义元数据,通过HeadObject接口可以获取Object的元数据。
meta: { year: 2020, people: "test" },
mime: "text/plain",
};
//oss简单上传
async function putObject(fileName, data, fileDir, dom, doneCallback, loading) {
try {
let curDate = formatDate(new Date());
let result = await client.put(fileDir + '/' + curDate + '/'+ fileName, data, {
headers
});
console.log(result)//此result.url里面就是上传到阿里云里面的链接
if (doneCallback) {
doneCallback(result)
}
layer.msg('上传成功');
layer.close(loading);
} catch (e) {
console.log(e);
}
}
// oss分片上传
async function multipartUploadFn(fileName, data, fileDir, dom, doneCallback, loading) {
try {
let dateStr = formatDate(new Date());
let curDate = dateStr.replace(/\-/g, "/");
// 分片上传。
const res = await client.multipartUpload(fileDir + '/' + curDate + '/' + fileName, data, {
...options,
// 设置上传回调
});
console.log(res)
var uint8Array = res.res.data;//此时返回的是一个字节,需要转成字符串
const decoder = new TextDecoder(); // 创建一个TextDecoder对象
const decodedString = decoder.decode(uint8Array); // 将Uint8Array转换为字符串
console.log('decodedString', decodedString);
var xmlDoc = $.parseXML(decodedString); // 解析XML字符串为XML文档对象
var $xml = $(xmlDoc); // 将XML文档对象转换为jQuery对象
var statename = $xml.find('Key').text(); // 查找并获取Key元素的文本内容
console.log("statename", statename);//此时的statename直接就是一个服务器上的路径,可以拼接上你自己的服务器进行查看了。
let result={url:''}
result.url=statename
if (doneCallback) {
doneCallback(result)
}
layer.msg('上传成功');
layer.close(loading);
} catch (err) {
console.log(err);
}
}
function uploadFile(dom, fileDir, doneCallback, ext) {
var exts = 'pdf|bmp|jpg|jpeg|png|gif|webp|doc|docx';
if (ext) {
exts = ext
}
var uploadcom=upload.render({
elem: dom,
accept: 'file',
multiple: true,
url: '',
exts: exts,
auto: false,
choose: function (obj) {
var loading = layer.load()
obj.preview(function (index, file, result) {
console.log('file', file)
var fileName = file.name;
var suffix = fileName.split('.');
fileName = unique() + '.' + suffix[suffix.length - 1];
if(file.size < (50 _ 1024 _ 1024)){
// 判断小于 50M 正常上传,大于则需要进行分片
putObject(fileName, file, fileDir, domStr, doneCallback, loading);
}else{
multipartUploadFn(fileName, file, fileDir, domStr, doneCallback, loading);
}
});
// 清空历史上传文件,解决choose只执行一次的问题!!!
uploadcom.config.elem.next()[0].value = '';
},
});
}
//每次随机产生一个唯一的 ID。
function sId() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function unique() {
return (sId() + sId() + "-" + sId() + "-" + sId() + "-" + sId() + "-" + sId() + sId() + sId());
}
// 时间戳转时间
function formatDate(date, isTime) {
var date = new Date(date);
var YY = date.getFullYear() + '/';
var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
if (isTime) {
return YY + MM + DD + " " + hh + mm + ss;
} else {
return YY + MM + DD;
}
}