不讲废话,全是干货 oss 直传,分片上传,OSS 下载方法,下载oss指定地址,获取oss地址,获取oss图片,删除oss
import OSS from 'ali-oss'
import moment from "moment";
function guid() {
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
let ossUrl = 'https://hr-gpbucket.oss-cn-beijing.aliyuncs.com/'
// 这些我就不多说了大家都懂吧
let client = new OSS({
region: '*******',
// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
accessKeyId: '*******',
accessKeySecret: '********',
// 填写Bucket名称。
bucket: '******',
});
// OSS 下载方法
export function downloadURLOss(ossFileUrl) {
const result = ossclient.get(ossFileUrl);
}
// 下载oss指定地址
export function downloadURL(url) {
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 上传oss 直传
export function ossUpload1(picForProject, fileBuffer) {
picForProject = picForProject.split('.')[0]
// const fileName = UUID4().toUpperCase().replace(/-/g, '')
const suffix = fileBuffer.name.substr(fileBuffer.name.indexOf('.'))
const url = `${picForProject}${guid()}${suffix}`
async function put() {
try {
await client.put(url, fileBuffer)
// await xxx(url) 在这里也可以直接把地址传给后端
return {'code': 200, 'url': ossUrl+url}
} catch (e) {
return e.message
}
}
return put()
};
/* ======== 分片上传(文件大于100M使用) ======== */
export const multipartUpload = async (picForProject, fileBuffer, onOrogress) => {
const suffix = fileBuffer.name.substr(fileBuffer.name.indexOf('.'))
const url = `${picForProject}${guid()}${suffix}`
// let timeData = moment().format("YYYY-MM-DD");
// let fileName = `${moment().format("x")}_${file.name}`;
try {
const options = {
// 获取分片上传进度、断点和返回值。
progress: (p, cpt, res) => {
onOrogress(p)
},
// 设置并发上传的分片数量。
parallel: 4,
// 设置分片大小。默认值为1 MB,最小值为100 KB。
partSize: 1024 * 1024 * 10,
// headers,
// 自定义元数据,通过HeadObject接口可以获取Object的元数据。
meta: {year: 2020, people: "test"},
mime: "text/plain",
timeout: 60000 * 60
};
const res = await client.multipartUpload(url, fileBuffer, {...options})
return {'code': 200, 'url': ossUrl+url}
} catch (e) {
// 捕获超时异常。
if (e.code === "ConnectionTimeoutError") {
// do ConnectionTimeoutError operation
}
}
// })
};
// 获取oss地址
export function showPrivateOss(picName) {
async function getOssAddr() {
try {
let signUrl = client.signatureUrl(picName, {expires: 1800}); // expires单位为秒
return {'code': 200, 'url': signUrl}
} catch (e) {
return e.message
}
}
return getOssAddr()
};
// 显示oss地址(拿取oss里面的图片进行显示)
export function imgSig(baseURL) {
// const client = new OSS({
// region: 'oss-cn-hangzhou',
// // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
// accessKeyId: 'LTAI5t9QjXdRyTVKjrmiLBgF',
// accessKeySecret: 'FRFxbdBxKVvCWhoho2VtZ9GfrwnfL1',
// // 填写Bucket名称。
// bucket: 'jianlanoss',
// });
// 生成带图片处理参数的文件签名URL,过期时间10分钟。
let signUrl = client.signatureUrl(baseURL, {
expires: 3600,
'process': 'image/resize,m_fixed,w_150,h_150/quality,q_100'
});
return signUrl
}
// 删除oss
export function deletePrivateOss(picName) {
let url = picName.split(ossUrl)
async function deleteOssAddr() {
try {
return client.delete(url[1]);
} catch (e) {
return e.message
}
}
return deleteOssAddr()
};
最后 引用方法
import {downloadURLOss,downloadURL,ossUpload1,multipartUpload,showPrivateOss,imgSig,deletePrivateOss} from "../../utils/uploadOSS";
使用方法
multipartUpload(files.file.name, files.file,(res)=>{uploads(res)}).then(res=>{
if (res.code == 200) {
onProgress.value = 0
addVideoForm.value.videoUrl = res.url
ElMessage.success('上传成功')
uploadTrue.value = true
}
})
第一个文件名字,第二个文件,第三个可以获取到上传进度,最后的then 当然是 上传成功得地址