上传文件-批量上传出现进度条抢占的问题,以及实现多文件分开上传与进度条显示

一个有思想的新时代农民工

已于 2024-01-17 10:55:40 修改

阅读量579

点赞数 8

文章标签：文件上传进度条 vue axios javascript

于 2024-01-17 10:51:43 首次发布

本文链接：https://blog.csdn.net/ShaLiWa/article/details/135641064

版权

本文描述了一个项目中遇到的文件上传问题，关注点在于实时进度条的展示、多选文件上传时的进度混乱以及如何确保文件上传完成。作者分享了使用Vue的解决方案，包括前端模板和JavaScript代码，展示了如何处理上传过程中的进度更新和状态管理。

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

最近接触一个项目中用到文件上传并要求可以添加编辑上传的文件信息，将文件转成二进制流的方式传参给后端，并要求带有实时进度条

看了网上有些资料 采用队列的解决方法，我这个项目需求方需要同时上传

需要解决的难点：

1. 进度条的展示
2. 当采用多选文件之后会发现, 上传的进度条会反复横跳(上传进度一直在变化…), 上传的文件越多, 横跳的速度, 频率就越快
3. 进度条和文件名建立对应关系
4. 判断全部文件是否全部上传完成（指的是接口调用完成，包括上传失败）

话不多说，直接上效果图和解决方案的核心代码

在这里插入图片描述
解决方案：
1.template

<div v-if="showProgress">
          <template  v-for="item in uploadFileList" :key="item.name">
            <el-row :gutter="10" v-if="item.status !== 'success'">
              <el-col :span="20">{{item.name}}</el-col>
              <el-col :span="4">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="item.progress" />
              </el-col>
            </el-row>
          </template>
       </div>

 <el-upload
            v-loading="loading"
          ref="uploadRef"
          class="upload-demo"
          v-model="fileList"
          size="large"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-change="handleChange"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :http-request="upload"
          :multiple="!item.limit || item.limit > 1"
          :limit="item.limit"
          >
          <el-button type="primary" plain :disabled="showProgress">上传文件</el-button>
        </el-upload>
        <div class="file-tip">
          <template v-if="item.desc">{{ item.desc }} <br/></template>
          支持文件格式：{{ (item.fileType && item.fileType.join(',')) || "doc ，docx，pdf"}} ，单个文件不能超过{{item.size || 10}}MB。
        </div>

Javascript 代码

 let uploadFileList = ref([])
 const showProgress = ref(false)
/** 上传 */
  const upload = (param) => {
    const { file, onProgress, onSuccess, onError } = param;
    const fileData = new FormData()
    fileData.append('files', file)
    showProgress.value = true;
    uploadFile(
        fileData,
        progressEvent => {
          // 计算并更新上传进度
          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          updateFileStatus(file.name, 'uploading', progress);
          // onProgress(progressEvent);
          }
    ).then(response => {
      //更新显示的上传进度
      updateFileStatus(file.name, 'success', 100);
      ElMessage.success(`${file.name} 上传成功`);
      // onSuccess(response.data);
    }).catch((error)=>{
     //更新显示的上传进度
      updateFileStatus(file.name, 'success', 100);
      ElMessage.error(`${file.name} 上传失败`);
      // onError(error)
    }).finally(()=>{
      if (checkAllUploadsComplete()) {
        showProgress.value = false;
        uploadFileList.value = []
        // ElMessage.success('所有文件上传成功');
      }
    })
  }
  const updateFileStatus = (name, status, progress = 0) => {
    const file = uploadFileList.value.find(f => f.name === name);
    if (file) {
      file.status = status;
      file.progress = progress;
    }
  };
  // 检查是否全部上传完成
  const checkAllUploadsComplete = () => {
    return uploadFileList.value.every(file => file.status === 'success');
  };

API写法：

export function uploadFile(data, onUploadProgress) {
  return request({
    url: "/assets/file/upload",
    headers: {
      repeatSubmit: false,
    },
    onUploadProgress,
    timeout: 20000000,
    method: "post",
    data: data,
  });
}