Vue+element-ui实现大文件分片上传，可控制同时上传的并发数

最新推荐文章于 2024-08-29 07:30:44 发布

一只前端汪

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量1.5w

点赞数 16

分类专栏： Vue Element-ui 文章标签： upload vue

本文链接：https://blog.csdn.net/weixin_44182162/article/details/106547808

版权

本文介绍了如何在Vue项目中利用element-ui的Upload组件实现大文件分片上传，并控制并发数量。作者指出，尽管element-ui的Upload组件本身不支持分片上传，但通过设置`customRequest`属性可以覆盖默认行为，从而实现自定义的分片上传逻辑。文章提及了一个名为chunkedUpload.js的模块，用于处理分片上传，虽然存在优化空间，但已能完成基本功能。

摘要由CSDN通过智能技术生成

2020.10.23更新：这篇文章中的方法有一些缺陷。更好的解决方案请看在Vue项目中创建自己的大文件分片上传组件（基于element-upload改造）

用过element-ui中Upload上传组件的都知道，他不支持文件分片上传，如果有文件分片的上传的需求时，只能去安装其他的上传组件，如vue-simple-uploader，webuploader等，我们公司的需求涉及到获取视频时长，上传文件名等等，如果换一个上传组件就要写两套获取文件信息的代码，不是很方便，查阅element-ui中Upload文档之后发现它有一个属性在这里插入图片描述
设置这个属性之后，可以覆盖组件自带的上传行为，可以实现自己的自定义上传，具体实现如下：

//template
<el-upload
  :http-request="chunkedUpload"
  :ref="chunkedUpload"
  :action="uploadUrl"
  :data="uploadData"
  :on-error="onError"
  :before-remove="beforeRemove"
  name="file">

//js部分
import chunkedUpload from './chunkedUpload'
export default {
   
  data() {
   
    return {
   
      uploadData: {
   
        //这里面放额外携带的参数
      },
      //文件上传的路径
      uploadUrl: process.env.BASE_API + '/oss/oss/uploadChunkFile', //文件上传的路径
      chunkedUpload: chunkedUpload // 分片上传自定义方法，在头部引入了
    }
  },
  methods: {
   
    onError(err, file, fileList) {
   
      this.$store.getters.chunkedUploadXhr.forEach(item => {
   
        item.abort()
      })
      this.$alert('文件上传失败，请重试', '错误', {
   
        confirmButtonText: '确定'
      })
    },
    beforeRemove(file) {
   
      // 如果正在分片上传，则取消分片上传
      if (file.percentage !== 100) {
   
        this.$store.getters.chunkedUploadXhr.forEach(item => {
   
          item.abort()
        })
      }
    }
  }
}

//chunkedUpload.js
import SparkMD5 from 'spark-md5'
import axios from 'axios'
import store from '@/store'
// 如果上传错误，获取报错信息
function getError(action, option, xhr) {
   
  let msg
  if (xhr.response) {
   
    m