vue上传图片到阿里云oss

要在Vue中上传图片到阿里云OSS，你可以按照以下步骤进行：

1. 创建一个阿里云OSS Bucket，并获取AccessKeyId、AccessKeySecret、Bucket名称和Endpoint。

2. 安装阿里云OSS的JS SDK，可以使用npm安装。

npm install ali-oss --save

3. 在Vue组件中引入阿里云OSS的JS SDK，并在data对象中声明阿里云OSS的相关信息。

import OSS from 'ali-oss';

export default {
  name: 'ImageUploader',
  data() {
    return {
      accessKeyId: 'your_access_key_id',
      accessKeySecret: 'your_access_key_secret',
      bucket: 'your_bucket_name',
      endpoint: 'your_endpoint',
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
      const client = new OSS({
        accessKeyId: this.accessKeyId,
        accessKeySecret: this.accessKeySecret,
        bucket: this.bucket,
        endpoint: this.endpoint
      });
      client.put('your_object_name', this.file)
        .then(response => {
          console.log(response);
          // 在这里处理上传成功后的逻辑
        })
        .catch(error => {
          console.log(error);
          // 在这里处理上传失败后的逻辑
        });
    }
  }
};

4. 在Vue组件中添加一个input元素，并在change事件中调用handleFileUpload方法。

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>

在这个示例中，我们首先在data对象中声明了阿里云OSS的相关信息，然后在handleFileUpload方法中创建了一个OSS客户端，并使用put方法上传了文件。在上传成功后，我们可以在then回调函数中处理上传成功后的逻辑，在上传失败后，我们可以在catch回调函数中处理上传失败后的逻辑。

请注意，这只是一个简单的示例。在实际使用中，你需要根据自己的需求进行更多的配置和处理。