本文主要是介绍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.dataclient.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上传组件，自定义上传
<el-upload accept="excel" class="upload-demo" ref="uploads" :http-request="uploadFile" :file-list="fileList" :on-message="message":auto-upload="false"><template #trigger><el-button type="success">选取文件</el-button></template><el-button style="margin-left: 10px;" type="success" @click="submitUpload">开始上传</el-button><el-button style="margin-left: 10px;margin-top: 15px;" type="primary"<template #tip><!-- <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div> --></template></el-upload>// 唯一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()
}这篇关于Vue3使用阿里云OSS直传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
