Vue3使用阿里云OSS直传

采用Browser.js简单上传，官网：

如何使用Browser.js SDK简单上传文件_对象存储 OSS-阿里云帮助中心

安装：

npm install ali-oss

首先获取临时访问凭证包括临时访问密钥（AccessKey ID和AccessKey Secret）和安全令牌（SecurityToken） 

获取临时密钥加安全令牌，通过从后端获取，令牌存储前端非常不安全，可以通过抓包工具进行抓取。

const client = ref(null) //oss授权信息


// 获取密钥信息
async function getosssa() {
    // 从后端获取密钥
    let data = await useOssApi().getoss({})
    miyao = data.data
    client.value = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: "oss-cn-hangzhou",
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: miyao.accessKeyId,
        accessKeySecret: miyao.accessKeySecret,
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: miyao.securityToken,
        // 填写Bucket名称。
        bucket: miyao.bucketName,
    });
}

 使用elemet-plus上传组件，自定义上传

  

                            
                            开始上传
                            
                                
                            
                        

// 唯一uuid
const getFileNameUUID = () => {
    function rx() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
    }
    return `${+new Date()}${rx()}${rx()}`
}

自定义上传方法：

// 上传文件
const uploadFile = async (file) => {
    if (file) {
        const options = {
            meta: { temp: "demo" },
            mime: "json",
            headers: { "Content-Type": "text/plain" },
        }
        try { 
            // getFileNameUUID() 生成唯一值  file.file获取文件流
            const result = await client.value.put(`${getFileNameUUID()}.xlsx`, file.file, options)
            // result.url 获取上传后的url地址，传给后端，后端做数据处理
            oosurl.value = result.url
        } catch (e) {
        }
    } else {
        ElMessage.warning({
            message: 'No file selected',
            type: 'warning'
        });
    }
}

上传组件绑定ref,手动控制上传

const uploads = ref() //上传


// 开始上传
function submitUpload() {
    uploads.value.submit()
}