fix 修复图片上传组件 数据异常问题

CrazyLionLi

2022-04-18 6b36385fa55a97144819e9cd6afc62f9314db438

 src/components/ImageUpload/index.vue

@@ -1,6 +1,7 @@
<template>

  <div class="component-upload-image">

    <el-upload

      multiple

      :action="uploadImgUrl"

      list-type="picture-card"

      :on-success="handleUploadSuccess"

@@ -73,6 +74,8 @@


const { proxy } = getCurrentInstance();

const emit = defineEmits();

const number = ref(0);

const uploadList = ref([]);

const dialogImageUrl = ref("");

const dialogVisible = ref(false);

const baseUrl = import.meta.env.VITE_APP_BASE_API;

@@ -102,22 +105,23 @@
    fileList.value = [];

    return [];

  }

});

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



// 删除图片

function handleRemove(file, files) {

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

  if (findex > -1) {

    fileList.value.splice(findex, 1);

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

  }

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

}



// 上传成功回调

function handleUploadSuccess(res) {

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

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

  proxy.$modal.closeLoading();

  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加载

@@ -149,7 +153,8 @@
      return false;

    }

  }

  proxy.$modal.loading("上传中");

  proxy.$modal.loading("正在上传图片，请稍候...");

  number.value++;

}



// 文件个数超出

@@ -159,7 +164,7 @@


// 上传失败

function handleUploadError() {

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

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

  proxy.$modal.closeLoading();

}



@@ -174,24 +179,10 @@
  let strs = "";

  separator = separator || ",";

  for (let i in list) {

    strs += list[i].url.replace(baseUrl, "") + separator;

    if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {

      strs += list[i].url.replace(baseUrl, "") + separator;

    }

  }

  return strs != "" ? strs.substr(0, strs.length - 1) : "";

}

</script>



<style scoped lang="scss">

// .el-upload--picture-card 控制加号部分

:deep(.hide .el-upload--picture-card) {

  display: none;

}

// 去掉动画效果

:deep(.el-list-enter-active),

:deep(.el-list-leave-active) {

  transition: all 0s;

}

:deep(.el-list-enter, .el-list-leave-active) {

  opacity: 0;

  transform: translateY(0);

}

</style>