修复多文件上传报错出现的异常问题

RuoYi

2022-08-24 fabc195e90d5a394b5089bf88305ea43eb791c04

修复多文件上传报错出现的异常问题

 src/components/FileUpload/index.vue

@@ -12,7 +12,7 @@
      :show-file-list="false"

      :headers="headers"

      class="upload-file-uploader"

      ref="upload"

      ref="fileUpload"

    >

      <!-- 上传按钮 -->

      <el-button type="primary">选取文件</el-button>

@@ -139,13 +139,15 @@


// 上传成功回调

function handleUploadSuccess(res, file) {

  uploadList.value.push({ name: res.fileName, url: res.fileName });

  if (uploadList.value.length === number.value) {

    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

  if (res.code === 200) {

    uploadList.value.push({ name: res.fileName, url: res.fileName });

    uploadedSuccessfully();

  } else {

    number.value--;

    proxy.$modal.closeLoading();

    proxy.$modal.msgError(res.msg);

    proxy.$refs.fileUpload.handleRemove(file);

    uploadedSuccessfully();

  }

}



@@ -153,6 +155,17 @@
function handleDelete(index) {

  fileList.value.splice(index, 1);

  emit("update:modelValue", listToString(fileList.value));

}



// 上传结束处理

function uploadedSuccessfully() {

  if (number.value > 0 && uploadList.value.length === number.value) {

    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    proxy.$modal.closeLoading();

  }

}



// 获取文件名称

@@ -169,7 +182,7 @@
  let strs = "";

  separator = separator || ",";

  for (let i in list) {

    if(undefined !== list[i].url) {

    if (list[i].url) {

      strs += list[i].url + separator;

    }

  }


 src/components/ImageUpload/index.vue

@@ -9,8 +9,8 @@
      :limit="limit"

      :on-error="handleUploadError"

      :on-exceed="handleExceed"

      name="file"

      :on-remove="handleRemove"

      ref="imageUpload"

      :before-remove="handleDelete"

      :show-file-list="true"

      :headers="headers"

      :file-list="fileList"

@@ -107,23 +107,6 @@
  }

},{ deep: true, immediate: true });



// 删除图片

function handleRemove(file, files) {

  emit("update:modelValue", listToString(fileList.value));

}



// 上传成功回调

function handleUploadSuccess(res) {

  uploadList.value.push({ name: res.fileName, url: res.fileName });

  if (uploadList.value.length === number.value) {

    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    proxy.$modal.closeLoading();

  }

}



// 上传前loading加载

function handleBeforeUpload(file) {

  let isImg = false;

@@ -162,6 +145,41 @@
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);

}



// 上传成功回调

function handleUploadSuccess(res, file) {

  if (res.code === 200) {

    uploadList.value.push({ name: res.fileName, url: res.fileName });

    uploadedSuccessfully();

  } else {

    number.value--;

    proxy.$modal.closeLoading();

    proxy.$modal.msgError(res.msg);

    proxy.$refs.imageUpload.handleRemove(file);

    uploadedSuccessfully();

  }

}



// 删除图片

function handleDelete(file) {

  const findex = fileList.value.map(f => f.name).indexOf(file.name);

  if (findex > -1 && uploadList.value.length === number.value) {

    fileList.value.splice(findex, 1);

    emit("update:modelValue", listToString(fileList.value));

    return false;

  }

}



// 上传结束处理

function uploadedSuccessfully() {

  if (number.value > 0 && uploadList.value.length === number.value) {

    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    proxy.$modal.closeLoading();

  }

}



// 上传失败

function handleUploadError() {

  proxy.$modal.msgError("上传图片失败");