vue oss实现图片上传
使用 Vue 实现 OSS 图片上传
安装 OSS SDK
在项目中安装阿里云 OSS 的 JavaScript SDK：
npm install ali-oss配置 OSS 客户端
在 Vue 组件中引入并配置 OSS 客户端：
import OSS from 'ali-oss';
const client = new OSS({
region: 'your-region', // 例如 oss-cn-hangzhou
accessKeyId: 'your-access-key-id',
accessKeySecret: 'your-access-key-secret',
bucket: 'your-bucket-name'
});实现上传方法
创建一个方法处理文件选择和上传逻辑：
methods: {
handleFileChange(event) {
const file = event.target.files[0];
if (!file) return;
const fileName = `uploads/${Date.now()}_${file.name}`;
client.put(fileName, file)
.then(res => {
console.log('上传成功:', res.url);
// 这里可以更新组件状态或触发父组件回调
})
.catch(err => {
console.error('上传失败:', err);
});
}
}前端界面
在模板中添加文件选择控件：
<template>
<div>
<input type="file" @change="handleFileChange" accept="image/*">
</div>
</template>安全建议
- 避免在前端暴露 AccessKey，推荐使用后端生成临时凭证
- 限制文件类型和大小
- 对上传的文件名进行随机化处理
进阶优化
-
添加进度条显示：
client.put(fileName, file, { progress: (p) => { console.log(`进度: ${Math.round(p * 100)}%`); } }) -
使用 STS 临时凭证：
// 需要先调用后端接口获取临时凭证 const tempClient = new OSS({ region: 'your-region', accessKeyId: 'temp-access-key-id', accessKeySecret: 'temp-access-key-secret', stsToken: 'security-token', bucket: 'your-bucket-name' }); -
添加图片预览功能：
// 在handleFileChange中添加 const reader = new FileReader(); reader.onload = (e) => { this.previewUrl = e.target.result; }; reader.readAsDataURL(file);
