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>

安全建议

1. 避免在前端暴露 AccessKey，推荐使用后端生成临时凭证
2. 限制文件类型和大小
3. 对上传的文件名进行随机化处理

进阶优化

1. 添加进度条显示：

   client.put(fileName, file, {
   progress: (p) => {
    console.log(`进度: ${Math.round(p * 100)}%`);
   }
   })

2. 使用 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'
   });

3. 添加图片预览功能：

   

   // 在handleFileChange中添加
   const reader = new FileReader();
   reader.onload = (e) => {
   this.previewUrl = e.target.result;
   };
   reader.readAsDataURL(file);