vue2使用elementui组件将图片从前端上传至阿里云oss

在Vue 2项目中使用Element UI的<el-upload>组件将图片上传到阿里云OSS，你需要做以下几步：

1. 安装阿里云OSS SDK：

npm install ali-oss

2. 创建OSS客户端实例并配置上传参数：

// oss.js
import OSS from 'ali-oss';
 
const client = new OSS({
  region: '<your-region>',
  accessKeyId: '<your-access-key-id>',
  accessKeySecret: '<your-access-key-secret>',
  bucket: '<your-bucket-name>'
});
 
export default client;

3. 在Vue组件中使用<el-upload>组件并配置上传行为：

<template>
  <el-upload
    :action="uploadUrl"
    list-type="picture-card"
    :on-success="handleSuccess"
    :before-upload="handleBeforeUpload">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>
 
<script>
import OSS from './path/to/oss.js';
 
export default {
  data() {
    return {
      uploadUrl: 'https://your-oss-bucket.oss-cn-hangzhou.aliyuncs.com', // 这里填写OSS提供的外链地址
    };
  },
  methods: {
    async handleBeforeUpload(file) {
      const fileName = `${Date.now()}-${file.name}`; // 自定义文件名
      try {
        const result = await OSS.multipartUpload(fileName, file);
        return {
          url: result.url // 返回的图片外链地址
        };
      } catch (error) {
        console.error('Upload failed:', error);
        return false;
      }
    },
    handleSuccess(response, file, fileList) {
      console.log('Upload success:', response.url);
    },
  },
};
</script>

在上述代码中，:action是上传的服务器地址，实际上传逻辑在handleBeforeUpload方法中处理，通过阿里云OSS SDK上传到OSS，然后返回一个包含外链地址的对象。handleSuccess方法用于处理上传成功后的响应。

确保替换<your-region>、<your-access-key-id>、<your-access-key-secret>、<your-bucket-name>和https://your-oss-bucket.oss-cn-hangzhou.aliyuncs.com为你自己的阿里云OSS配置信息。