如何基于 vue3+el-upload 二次封装上传文件组件到阿里云 oss(附上传进度条)

一、创建生成全局唯一标识符 方法

• 在utils文件夹下 创建guid.ts

// 生成GUID
export function newGuid() {
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
}

二、导入计算文件Md5(spark-md5)

npm i spark-md5

三、安装依赖ali-oss

npm i ali-oss

四、创建导出ali-oss 方法

• 在utils文件夹下 创建alioss.ts,并接收所需要的阿里云oss地区、id、密钥、远程仓库名称

import OSS from 'ali-oss'
export function client<T>(accessKeyId: T, accessKeySecret: T) {
//接收过来阿里云id和密钥
  console.log('接收到的', accessKeyId, accessKeySecret)
  var clients = new OSS({
    region: 'oss-cn-beijing', //地区(填写你自己的阿里云oss地区)
    accessKeyId, //阿里云oss id
    secure: true,
    accessKeySecret, //阿里云oss 密钥
    bucket: 'cangku', //远程仓库名称 (填写你自己的阿里云仓库)
  }) 
  return clients
}

五、创建上传文件 组件(完整代码)

• 创建封装上传文件组件 (代码中需填写阿里云oss的id和密钥)

<template>
  <div>
    <el-progress
      v-if="showPercentage"
      style="margin-bottom: 15px"
      :text-inside="true"
      :stroke-width="20"
      :percentage="percentage"
      striped
      striped-flow
    />
    <el-upload
      class="upload-demo"
      :drag="drag"
      :limit="limit"
      :disabled="disabled"
      :auto-upload="autoUpload"
      :accept="accept"
      :show-file-list="showFileList"
      :action="action"
      :multiple="multiple"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
      :on-progress="uploadFileProcess"
      :on-success="handleAvatarSuccess"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-change="handleChange"
    >
      <!-- 拖拽上传 -->
      <div v-if="drag">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </div>
      <!-- 手动上传 -->
      <div v-else>
        <el-button type="primary">点我上传</el-button>
      </div>
    </el-upload>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import SparkMD5 from 'spark-md5'
import { newGuid } from '@/utils/guid'
import { client } from '@/utils/alioss'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
//是否显示上传进度条
const showPercentage = ref(false)
//上传进度
const percentage = ref(0)

const props = defineProps({
  // 请求url
  action: {
    type: String,
  },

  //是否支持多选文件
  multiple: {
    type: Boolean,
    default: () => false,
  },
  //是否显示已上传文件列表
  showFileList: {
    type: Boolean,
    default: () => true,
  },
  //是否启用拖拽上传
  drag: {
    type: Boolean,
    default: () => true,
  },
  //接收的上传类型
  accept: {
    type: String,
  },
  //允许上传文件的最大数量
  limit: {
    type: Number,
  },
  //是否禁用上传
  disabled: {
    type: Boolean,
    default: () => false,
  },
  //是否自动上传文件
  autoUpload: {
    type: Boolean,
    default: () => true,
  },
})

//获取文件的Mds
const getFileMd5 = (file: any) => {
  return new Promise((resolve, reject) => {
    const spark = new SparkMD5.ArrayBuffer()
    console.log('spark', spark)
    const fileReader = new FileReader()
    console.log('fileReader', fileReader)
    fileReader.onload = (e: any) => {
      console.log('打印e', e)
      spark.append(e.target.result)
      resolve(spark.end())
    }
    fileReader.onerror = () => {
      reject('')
    }
    fileReader.readAsArrayBuffer(file.file)
  })
}

//获取文件后缀名
const getExtension = (file: File) => {
  if (file) {
    // 通过正则表达式提取文件后缀名
    const regex = /(?:\.([^.]+))?$/
    const result = regex.exec(file.name)
    return result?.[1] || null
  }
  return null // 处理输入为 null 的情况
}

//自定义上传文件
const httpRequest = async (file: any) => {
  ElMessage({
    message: '开始上传,请等待!',
    type: 'warning',
  })
  showPercentage.value = true
  console.log('自定义上传了文件', file)
  //生成文件md5
  const fileMd5 = await getFileMd5(file)
  console.log('打印文件的md5', fileMd5)

  //生成guid
  const fileGuid = newGuid()
  console.log('打印生成的文件名称', fileGuid)

  //获取上传文件的后缀
  const fileSuffix = getExtension(file.file)
  console.log('打印获取的文件后缀', fileSuffix)

  //生成新文件名
  const newFileName = fileGuid + '.' + fileSuffix
  console.log('生成新文件名', newFileName)

  let AccessKeyId = 'xxxx'  //填写你的阿里云oss id
  let AccessKeySecret = 'xxxx' //填写你的阿里云oss 密钥
  let res = await client(AccessKeyId, AccessKeySecret).multipartUpload(
    newFileName,
    file.file,
    {
      progress,
      parallel: 4, //同时上传数量
      partSize: 1024 * 1024 * 1, //设置分片大小
      timeout: 120000, //设置超时时间
    }
  )
  console.log('打印上传的结果', res)
  if (res.res.statusCode === 200) {
    ElMessage({
      message: '上传成功!',
      type: 'success',
    })
  } else {
    file.onError('上传失败')
  }
}
//上传进度
const progress = (progress: any, checkpoint: any) => {
  // Object的上传进度。
  console.log('上传进度', progress)
  percentage.value = progress.toFixed(2) * 100
  // 分片上传的断点信息。
  console.log('分片上传的断点信息', checkpoint)
}
//上传文件之前的钩子函数
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  console.log('上传文件之前的钩子函数', file)
}

//文件上传时的钩子函数
const uploadFileProcess: UploadProps['onProgress'] = () => {
  console.log('文件上传时的钩子函数')
}

//文件上传成功时的钩子
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log('文件上传成功时的钩子')
  setTimeout(() => {
    showPercentage.value = false
    percentage.value = 0
  }, 300)
}

// 文件列表移除文件时的钩子
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log('文件列表移除文件时的钩子')
}

//当超出限制时，执行的钩子函数
const handleExceed: UploadProps['onExceed'] = () => {
  console.log('超出限制时，执行的钩子函数')
}

//文件状态改变时的钩子函数
const handleChange: UploadProps['onChange'] = () => {
  console.log('文件状态改变时的钩子函数')
}
</script>

<style scoped lang="scss"></style>

六、引入使用组件

• 引入组件

const UploadFile = defineAsyncComponent(
  () => import('@/components/uploadFile/index.vue')
)

• 使用组件

<UploadFile></UploadFile>