直击前端痛点！Vue 自定义阿里云 OSS 前端直传组件大放送

前端

2024-01-06 10:16:29

背景

对于 OSS 用户而言，上传服务必不可少。以往，Web 端普遍采用的上传方式是：用户在浏览器或 App 端上传文件到应用服务器，再由应用服务器将文件上传至 OSS。具体流程如下图所示：

[图片]

与数据直传至 OSS 相比，上述方法存在以下三点劣势：

增加服务器压力 ：文件需先上传到应用服务器，再由服务器转发至 OSS，加重了服务器负担。
延迟高 ：文件上传分两步进行，增加了传输时延。
无法直接获取上传进度 ：应用服务器无法实时感知 OSS 的上传进度，难以向用户提供直观反馈。

针对上述痛点，本文将介绍一款基于 Vue 的自定义阿里云 OSS 前端直传组件，帮助开发者轻松实现前端文件直传 OSS，解决上述问题。

组件优势

本组件拥有以下优势：

前端直传，减轻服务器压力 ：文件直接从前端上传到 OSS，无需经过应用服务器中转，有效减轻服务器负担。
低延迟，传输更迅速 ：前端直传省去了服务器转发环节，缩短了文件上传时间。
实时进度反馈，用户体验佳 ：组件支持实时获取 OSS 上传进度，可向用户提供直观的上传进度条，提升用户体验。
易于集成，使用便捷 ：组件提供简洁易懂的 API，开发者可轻松将其集成到 Vue 项目中。

使用指南

安装

npm install vue-oss-direct-upload --save

使用

import VueOssDirectUpload from 'vue-oss-direct-upload';
import { ref } from 'vue';

export default {
  components: { VueOssDirectUpload },
  setup() {
    // OSS 相关配置，具体参数参见阿里云 OSS 官方文档
    const ossConfig = {
      region: 'oss-cn-shanghai',
      accessKeyId: 'your-access-key-id',
      accessKeySecret: 'your-access-key-secret',
      bucket: 'your-bucket-name'
    };

    // 上传文件
    const file = ref(null);
    const uploadFile = () => {
      if (!file.value) {
        alert('请先选择文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', file.value);

      // 创建上传任务
      const uploadTask = new VueOssDirectUpload({
        ossConfig,
        formData
      });

      // 监听上传进度
      uploadTask.on('progress', (progressEvent) => {
        console.log(`上传进度：${progressEvent.loaded / progressEvent.total * 100}%`);
      });

      // 监听上传成功
      uploadTask.on('success', (response) => {
        console.log('上传成功');
      });

      // 监听上传失败
      uploadTask.on('error', (error) => {
        console.error('上传失败', error);
      });

      // 发起上传请求
      uploadTask.upload();
    };

    return {
      file,
      uploadFile
    };
  }
};

参数说明

参数名	类型	必填	默认值	说明
ossConfig	Object	是	-	OSS 相关配置
formData	FormData	是	-	包含上传文件的 FormData 对象
autoUpload	Boolean	否	true	是否自动上传，默认为 true
parallel	Number	否	1	并发上传数，默认为 1
chunkSize	Number	否	2 * 1024 * 1024	分块上传时每个分块的大小，默认为 2MB
timeout	Number	否	30000	上传请求超时时间，单位为毫秒，默认为 30 秒
headers	Object	否	{}	上传请求的自定义头部信息
onProgress	Function	否	() => {}	上传进度回调函数，参数为 ProgressEvent 对象
onSuccess	Function	否	() => {}	上传成功回调函数，参数为 XMLHttpRequest 对象
onError	Function	否	() => {}	上传失败回调函数，参数为 Error 对象
onAbort	Function	否	() => {}	上传中止回调函数