不讲废话,全是干货,看了我得文章oss 再也不难了

不讲废话,全是干货 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 当然是 上传成功得地址