vue3 上传图片 el-upload 到oss

Vue3是一个流行的前端框架，它在很多方面都有很好的改进和优化。而el-upload是Vue中一个用于上传文件的组件，我们可以使用它来实现图片上传到阿里云OSS的功能。下面我为您介绍一下如何使用el-upload实现这个功能：

1. 安装依赖

npm install ali-oss --save

2. 配置OSS参数

在使用OSS之前，我们需要先获取AccessKey、AccessKeySecret以及Endpoint等参数。然后在项目中进行如下配置：

import OSS from 'ali-oss'

const client = new OSS({
  accessKeyId: 'your_access_key_id',
  accessKeySecret: 'your_access_key_secret',
  bucket: 'your_bucket_name',
  region: 'your_bucket_region',
  secure: true
})

3. 在Vue组件中使用el-upload

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :headers="headers"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import OSS from 'ali-oss'

export default {
  data() {
    return {
      uploadUrl: 'https://your_bucket_name.oss-cn-your_region.aliyuncs.com',
      headers: {},
      ossClient: null,
    }
  },
  created() {
    this.ossClient = new OSS({
      accessKeyId: 'your_access_key_id',
      accessKeySecret: 'your_access_key_secret',
      bucket: 'your_bucket_name',
      region: 'your_bucket_region',
      secure: true
    })
  },
  methods: {
    async beforeUpload(file) {
      const suffix = file.name.substring(file.name.lastIndexOf('.'))
      const fileName = Date.now() + suffix
      const { res } = await this.ossClient.signatureUrl(fileName, { expires: 3600 })
      this.uploadUrl = res.requestUrls
      this.headers = {
        'Content-Type': file.type,
        'x-oss-date': new Date().toISOString(),
        Authorization: res.authorization,
        'x-oss-security-token': res.securityToken,
      }
    },
    async handleSuccess(res) {
      const url = await this.ossClient.signatureUrl(res.name)
      console.log('上传成功：', url)
    },
  }
}
</script>

上面的代码中，我们首先安装了ali-oss依赖并进行了OSS参数配置，然后在Vue组件中使用了el-upload组件，并将上传地址和请求头设置为组件中的data数据。在beforeUpload方法中，我们使用ali-oss提供的signatureUrl方法获取上传地址和请求头信息，并将其设置到组件data中。当上传成功时，我们可以通过handleSuccess方法获取上传后的图片地址。