需求：el-upload加上文件上传进度

需求：给el-upload加上文件上传进度

效果：

方式一：封装的接口

js 复制代码

export function submissionUpload(file: File, config = {}) {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("folder", "submission/temp");
  formData.append("fileType", "all");

  return request({
    url: "/api/submission/upload",
    method: "post",
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    },
    ...config, // ✅ 透传 axios 的额外参数
  });
}

在调用时加上 onUploadProgress

js 复制代码

async function uploadFile(options: UploadRequestOptions): Promise<any> {
  const config = {
    onUploadProgress: (progressEvent: ProgressEvent) => {
      if (progressEvent.total) {
        const percent = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        options.onProgress?.({ percent }, options.file); // 通知 el-upload
      }
    },
  };

  if (
    props.type === "submission" ||
    props.type === "review" ||
    props.type === "reviewData" ||
    props.type === "revision"
  ) {
    const { data } = await submissionUpload(options.file, config);
    fileForm.value.name = data.content?.origin;
    fileForm.value.innerId = data.content?.inner;
    fileForm.value.randomCode = Math.random();
    setFile(data);
  } else {
    const { data } = await copyeditUpload(options.file, config);
    fileForm.value.name = data.content?.origin;
    fileForm.value.innerId = data.content?.inner;
    fileForm.value.randomCode = Math.random();
    setFile(data);
  }
}

方式二：使用axios方式

js 复制代码

async function uploadFile(options: UploadRequestOptions): Promise<any> {
  const formData = new FormData();
  formData.append("file", options.file);
  // formData.append("folder", "submission/temp")
  formData.append("fileType", "all")

  let url = "";
  let folder = "";

  if (
    props.type === "submission" ||
    props.type === "review" ||
    props.type === "reviewData" ||
    props.type === "revision"
  ) {
    url = "/api/submission/upload"; 
    folder = "submission/temp";
  } else {
    url = "/api/copyedit/upload"; 
    folder = "copyedit/temp";
  }


  formData.append("folder", folder);

  try {
    const res = await axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
      // 上传进度回调
      onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          // 更新进度
          options.onProgress({ percent }, options.file);
        }
      },
    });

    const data = res.data;
    if (data?.code === 2000) {
      fileForm.value.name = data?.data?.content?.origin;
      fileForm.value.innerId = data?.data?.content?.inner;
      fileForm.value.randomCode = Math.random();
      setFile(data.data);

      options.onSuccess(data, options.file);
      showProgress.value = false 
    } else {
      options.onError(res);
      showProgress.value = false 
      ElMessage.error(res.data.message)
    }
  } catch (err: any) {
    options.onError(err);
    showProgress.value = false 
  }
}

界面：

js 复制代码

<el-form-item
          prop="innerId"
          :rules="[
            {
              required: true,
              message: 'Please Upload File',
              trigger: 'change',
            },
          ]"
        >
          <el-row>
            <el-col :span="24">
              <!-- 显示绿色上传成功图标 :show-file-list="false" -->
              <el-upload
                ref="upload"
                :http-request="uploadFile"
                class="upload-demo"
                v-model:file-list="fileList"
                :before-upload="beforeUpload"
                :before-remove="beforeUpload"
              >
                <el-button type="primary">Upload</el-button>

                <template #tip>
                  <div class="el-upload__tip">
                    upload files you would like the editor and/or author to
                    consult, including revised versions of the original review
                    file(s).
                  </div>
                </template>
              </el-upload>

              <div v-if="showProgress" class="upload-progress">
                <div><el-icon><InfoFilled /></el-icon> The file is being uploaded. Please do not close the pop-up box.</div>
              </div>

            </el-col>
          </el-row>
        </el-form-item>
        
        
// 文件上传效果
const showProgress = ref(false)
const beforeUpload = (file) => {
  showProgress.value = true  // 开始上传时显示进度

}