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

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

1. 配置阿里云 OSS

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

2. 后端获取上传凭证

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

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

javascript 复制代码
const OSS = require('ali-oss');
const STS = require('ali-oss').STS;

const client = new OSS({
  region: '<your-oss-region>',
  accessKeyId: '<your-access-key-id>',
  accessKeySecret: '<your-access-key-secret>',
  sts: new STS({
    accessKeyId: '<your-access-key-id>',
    accessKeySecret: '<your-access-key-secret>',
  })
});

async function getUploadCredentials(bucketName, objectName) {
  try {
    const result = await client.stsAssumeRole('<your-sts-role-arn>', '<your-sts-session-name>', 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('<your-bucket-name>', '${filename}').then(credentials => {
  console.log(credentials);
}).catch(error => {
  console.error('Error:', error);
});

3. 前端 Vue 2 实现上传

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

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

javascript 复制代码
<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploadCredentials: null,
    };
  },
  methods: {
    async handleFileChange(event) {
      this.file = event.target.files[0];
    },
    async fetchUploadCredentials() {
      try {
        const response = await axios.get('/api/get-oss-credentials'); // 替换为你的后端接口
        this.uploadCredentials = response.data;
      } catch (error) {
        console.error('Error fetching upload credentials:', error);
      }
    },
    async uploadFile() {
      if (!this.file || !this.uploadCredentials) {
        alert('Please select a file and fetch credentials first.');
        return;
      }

      const formData = new FormData();
      formData.append('key', this.uploadCredentials.key);
      formData.append('OSSAccessKeyId', this.uploadCredentials.AccessKeyId);
      formData.append('policy', this.uploadCredentials.policy);
      formData.append('Signature', this.uploadCredentials.signature);
      formData.append('success_action_status', '200');
      formData.append('file', this.file);

      try {
        const response = await axios.post(this.uploadCredentials.uploadUrl, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        console.log('Upload successful:', response.data);
      } catch (error) {
        console.error('Error uploading file:', error);
      }
    },
  },
  async mounted() {
    // Fetch upload credentials when the component is mounted
    await this.fetchUploadCredentials();
  },
};
</script>
4. 注意事项
  1. 安全性 :确保你的后端接口 /api/get-oss-credentials 是安全的,并且只有经过身份验证的用户才能访问。
  2. CORS 配置:在阿里云 OSS 的 Bucket 配置中,配置 CORS(跨域资源共享),允许你的前端域名进行访问。
  3. 错误处理:在实际项目中,应添加更多的错误处理和用户提示。

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

相关推荐
quitv19 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco11 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh11 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
软件开发技术深度爱好者11 小时前
验证码介绍及生成与验证(HTML + JavaScript实现)
javascript