采用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上传组件,自定义上传
<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()
}