vue前端上传文件到oss完整代码

以下是上传文件到阿里云 OSS 的 Vue 前端完整代码示例：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import OSS from 'ali-oss'

export default {
  data() {
    return {
      file: null,
      client: null,
      region: 'your-region',
      accessKeyId: 'your-access-key-id',
      accessKeySecret: 'your-access-key-secret',
      bucket: 'your-bucket-name',
      uploadPath: 'your-upload-path',
      progress: 0
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
    },
    async uploadFile() {
      const fileName = this.file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))

      // 初始化 OSS 客户端
      this.client = new OSS({
        region: this.region,
        accessKeyId: this.accessKeyId,
        accessKeySecret: this.accessKeySecret,
        bucket: this.bucket
      })

      // 上传文件
      try {
        const result = await this.client.multipartUpload(
          `${this.uploadPath}/${fileName}`,
          this.file,
          {
            progress: progress => {
              this.progress = progress * 100
            }
          }
        )
        console.log(result)
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

其中，`ali-oss` 是阿里云 OSS 官方提供的 Node.js SDK，可以通过 `npm install ali-oss` 命令进行安装。在代码中，我们首先在 `data()` 方法中定义了上传需要用到的参数，如 `region`、`accessKeyId`、`accessKeySecret`、`bucket`、`uploadPath` 等，并且定义了 `file` 和 `client` 两个变量，`file` 变量用于存储用户选择的文件，`client` 变量则用于初始化 OSS 客户端。

在 `handleFileUpload()` 方法中，我们通过 `@change` 监听 input 文件选择事件，获取用户选择的文件，将其存储在 `file` 变量中。

在 `uploadFile()` 方法中，我们首先获取上传文件的名称和后缀，然后通过 `new OSS()` 初始化 OSS 客户端，接着使用 `multipartUpload()` 方法上传文件，其中第一个参数为上传到 OSS 的完整路径，第二个参数为要上传的文件，第三个参数为上传进度回调。在上传过程中，通过 `this.progress` 存储上传进度，最终上传完成后，将返回上传成功的结果。

当然，在实际应用中，你需要根据你的实际情况进行相应的修改。