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: '<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 hourconditions: [['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 组件的示例：

<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 mountedawait this.fetchUploadCredentials();},
};
</script>

4. 注意事项

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

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