vue上传图片到阿里云oss

要使用Vue上传图片到阿里云OSS，你需要进行以下步骤：

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

2. 安装ali-oss和vue-ali-oss插件，可以使用npm安装。

3. 在Vue组件中引入vue-ali-oss插件，并且在data中声明阿里云OSS的相关信息。

4. 编写上传图片的方法，使用ali-oss插件进行上传。

下面是一个简单的代码示例，可以供你参考：

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

<script>
import OSS from 'ali-oss';
import VueAliOSS from 'vue-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(this.file.name, this.file)
        .then(response => {
          console.log(response);
          // 在这里处理上传成功后的逻辑
        })
        .catch(error => {
          console.log(error);
          // 在这里处理上传失败后的逻辑
        });
    }
  },
  mixins: [VueAliOSS]
};
</script>

在这个示例中，我们首先在data中声明了阿里云OSS的相关信息，然后在handleFileUpload方法中使用ali-oss插件进行上传。在上传成功后，我们可以在then回调函数中处理上传成功后的逻辑，在上传失败后，我们可以在catch回调函数中处理上传失败后的逻辑。

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