腾讯云cos文件上传示例代码

封装的js

let cos;
/**
 * 上传腾讯云cos
 * @param {*} CONFIG  配置参数
 * @param {*} fileType  文件类型
 * @param {*} callBack  回调函数
 */
function uploadImgCOS(CONFIG, fileType, callBack) {

    if (!cos) introduceJs('https://www.yilibabyclub.com/Attachment_Islion_New/BigPurchase/xiaoji/file/utils/cos-js-sdk-v5.min.js');
    const ipt = document.createElement('input');
    ipt.type = 'file'; ipt.accept = fileType; ipt.onchange = ({ target }) => target.files[0] && upload(target.files[0], CONFIG, callBack);
    ipt.click();
}
// 工具：生成唯一文件名
const genKey = (name, dir) => dir + Date.now() + '-' + Math.random().toString(36).slice(2) + '.' + name.split('.').pop();
// 上传函数
function upload(file, CONFIG, callBack) {
    // 初始化 COS
    cos = new COS({ SecretId: CONFIG.SecretId, SecretKey: CONFIG.SecretKey, SecurityToken: CONFIG.SecurityToken, StartTime: CONFIG.StartTime, ExpiredTime: CONFIG.ExpiredTime });
    console.log('开始上传：', genKey(file.name, CONFIG.Dir), CONFIG);
    const Key = genKey(file.name, CONFIG.Dir);
    cos.putObject({
        Bucket: CONFIG.Bucket,
        Region: CONFIG.Region,
        Key,
        Body: file, // 上传文件对象
        onProgress: function (progressData) {
            console.log('进度：' + (progressData.percent * 100).toFixed(0) + '%')
        }
    }, function (err, data) {
        if (err) {
            console.log('上传失败，返回数据为：', err);
        }
        console.log('上传成功，返回数据为：', data);
        console.log('上传成功，返回链接为：', 'https://' + data.Location);
        callBack('https://' + data.Location)
    });
}

使用上面的代码

newVue('#app', {

    setup() {
        const url = ref('')

        const CONFIG = {
            Bucket: 'XXX', // 存储桶
            Region: 'XXX', // 地域
            SecretId: 'XXX', // 临时密钥的SecretId
            SecretKey: 'XXXX', // 临时密钥的SecretKey
            Dir: '', // 文件名称，可以为空也可以自己写
            SecurityToken: 'XXXXXXXXX',
            StartTime: 1766476876, // 临时密钥开始时间
            ExpiredTime: 1766563276, // 临时密钥过期时间
        };

        // 触发这个函数，就会弹出选择文件的窗口选择并上传
        const selectAdnUpload = () => {
            uploadImgCOS(CONFIG, 'image/*', (u) => {
                console.log('上传返回链接为：', u)
                url.value = u
            })
        }
        return {
            selectAdnUpload,
            url
        }
    }
})