el-upload直传oss
时间: 2023-10-12 10:05:52 浏览: 58
el-upload 是一个基于 Element UI 的文件上传组件,可以轻松地实现文件上传功能。要实现直传至 OSS,需要在后端实现签名和上传接口,并在前端配置相关参数。
首先,在后端实现签名和上传接口。可以使用 OSS SDK 来实现,具体可以参考阿里云官方文档。
然后,在前端配置相关参数,主要包括 OSS 相关参数和上传接口的地址。示例代码如下:
```
<el-upload
action="/api/upload" // 上传接口地址
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:headers="headers"
:data="formData"
:limit="1"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
<script>
export default {
data() {
return {
oss: {
region: 'oss-cn-hangzhou', // OSS 区域
accessKeyId: 'your_access_key_id', // OSS 访问密钥 ID
accessKeySecret: 'your_access_key_secret', // OSS 访问密钥 Secret
bucket: 'your_bucket', // OSS Bucket 名称
dir: 'your_dir/', // 上传目录,可选
host: 'https://your_bucket.oss-cn-hangzhou.aliyuncs.com' // OSS Endpoint
},
headers: {
'Content-Type': 'multipart/form-data'
},
formData: {}
}
},
methods: {
beforeUpload(file) {
const suffix = file.name.substr(file.name.lastIndexOf('.'))
const filename = Date.now() + suffix
const policyText = {
expiration: '2021-01-01T12:00:00.000Z', // 过期时间
conditions: [
['content-length-range', 0, 1048576000] // 文件大小限制,这里设置为 1GB
]
}
const policyBase64 = Buffer.from(JSON.stringify(policyText)).toString('base64')
const signature = crypto.createHmac('sha1', this.oss.accessKeySecret).update(policyBase64).digest('base64')
this.formData = {
key: this.oss.dir + filename,
policy: policyBase64,
OSSAccessKeyId: this.oss.accessKeyId,
success_action_status: '200',
signature: signature,
file: file
}
},
onSuccess(response) {
console.log('上传成功:', response)
},
onError(error) {
console.log('上传失败:', error)
}
}
}
</script>
```
在上传之前,需要先计算出 policy、signature 和上传文件的 key 等参数,并将这些参数传递给后端。在计算 policy 和 signature 时,需要使用 Node.js 中的 crypto 模块。
上传成功后,会返回文件在 OSS 中的访问地址,可以根据需要进行处理。