Vue2实现上传图片到阿里云的OSS对象存储

在 Vue 2 项目中，将图片上传到阿里云的 OSS（对象存储）需要几个步骤，包括配置阿里云 OSS、获取上传凭证、在前端进行上传操作等。以下是一个详细的实现步骤：

1. 配置阿里云 OSS

首先，你需要在阿里云 OSS 上创建一个存储桶（Bucket），并配置好相关的权限。

2. 后端获取上传凭证

由于直接暴露 OSS 的 Access Key ID 和 Access Key Secret 到前端是不安全的，所以需要通过后端服务器来获取一个临时的上传凭证（STS Token）。

以下是一个使用 Node.js 和阿里云 SDK 获取上传凭证的示例：

const OSS = require('ali-oss');
const STS = require('ali-oss').STS;

const client = new OSS({
  region: '',
  accessKeyId: '',
  accessKeySecret: '',
  sts: new STS({
    accessKeyId: '',
    accessKeySecret: '',
  })
});

async function getUploadCredentials(bucketName, objectName) {
  try {
    const result = await client.stsAssumeRole('', '', 3600);
    const stsCredentials = {
      AccessKeyId: result.credentials.AccessKeyId,
      AccessKeySecret: result.credentials.AccessKeySecret,
      SecurityToken: result.credentials.SecurityToken,
      Expiration: result.credentials.Expiration,
    };

    const policy = {
      expiration: new Date(Date.now() + 3600 * 1000).toISOString(), // 1 hour
      conditions: [
        ['content-length-range', 0, 10485760], // Limit upload size to 10MB
        ['starts-with', '$key', objectName],
      ],
    };

    const postObject = await client.postObject(bucketName, objectName, policy);

    return {
      ...stsCredentials,
      ...postObject,
    };
  } catch (error) {
    console.error('Error getting upload credentials:', error);
    throw error;
  }
}

// Example usage:
getUploadCredentials('', '${filename}').then(credentials => {
  console.log(credentials);
}).catch(error => {
  console.error('Error:', error);
});

3. 前端 Vue 2 实现上传

在 Vue 2 项目中，你可以使用 Axios 或 Fetch 来请求后端接口获取上传凭证，然后使用这些凭证进行文件上传。

以下是一个 Vue 组件的示例：

4. 注意事项

1. 安全性：确保你的后端接口 /api/get-oss-credentials 是安全的，并且只有经过身份验证的用户才能访问。
2. CORS 配置：在阿里云 OSS 的 Bucket 配置中，配置 CORS（跨域资源共享），允许你的前端域名进行访问。
3. 错误处理：在实际项目中，应添加更多的错误处理和用户提示。

通过以上步骤，你就可以在 Vue 2 项目中实现从前端上传图片到阿里云 OSS 对象存储。