el-upload上传组件二次封装-数据回显-demo

组件 -组件内回显

<template>
  <el-upload
    ref="uploadRef"
    v-model:file-list="modelValue"
    action=""
    :limit="1"
    list-type="picture-card"
    :auto-upload="true"
    :on-exceed="onExceed"
    :on-change="handleChange"
    :before-upload="onBefore"
    :http-request="uploadBpmn"
  >
    <el-icon><IconifyIconOffline :icon="Plus" /></el-icon>
    <template #tip>
      <div class="el-upload__tip">只能上传jpeg/jpg/png文件</div>
    </template>
    <template #file="{ file }">
      <div>
        <!-- <img class="el-upload-list__item-thumbnail" :src="modelValue[0].url" /> -->
        <img class="el-upload-list__item-thumbnail" :src="file.url" />
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><IconifyIconOffline :icon="Delete" /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</template>

<script setup>
defineOptions({
  name: "HElUpload"
});
import { ref, reactive, computed, defineProps, defineEmits } from "vue";
import Plus from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import { message } from "@/utils/message";
import { uploadParamUpload } from "@/api/launchpad";
const props = defineProps({
  modelValue: {
    type: String,
    default: () => ""
  }
});

const emits = defineEmits(["update:modelValue"]);

const modelValue = computed({
  get() {
    return [
      {
        url: props.modelValue
      }
    ];
  },
  set(val) {
    emits("update:modelValue", val);
  }
});

const uploadRef = ref();
const disabled = ref(false);
// 文件状态改变时
const handleChange = (response, file, fileList) => {
  console.log("handleChange", response, file, fileList);
  // modelValue.value = response.url;
};

const uploadBpmn = val => {
  console.log("uploadBpmn", val);
};
/** 上传文件前校验 */
const onBefore = file => {
  console.log("onBefore", file);

  if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
    message("只能上传图片");
    return false;
  }
  const isExceed = file.size / 1024 / 1024 > 4;
  if (isExceed) {
    message(`单个图片大小不能超过4MB`);
    return false;
  }
  getUploadParamUpload(file);
};
/** 超出最大上传数时触发 当超出限制时*/
const onExceed = () => {
  message("最多上传1张图片，请先删除在上传");
};
const handleRemove = file => {
  console.log("handleRemove", file);
  modelValue.value = "";
  uploadRef.value.clearFiles();
};

// 获取头像上传参数
const getUploadParamUpload = async file => {
  try {
    let params = {
      contentType: file.type || "image/png"
    };
    const {
      data: { data }
    } = await uploadParamUpload(params);
    console.log("getUploadParamUpload", data);
    uploadImage(data, file);
  } catch (error) {
    console.log("getUploadParamUpload", error);
  }
};

// 上传图片
const uploadImage = async (xhrData, file) => {
  console.log("uploadImage", xhrData, file);
  try {
    // const formData = new FormData();
    // for (const key in xhrData.param) {
    //   const value = xhrData.param[key];
    //   formData.append(key, value);
    // }
    // formData.append("file", file.raw);
    // // console.log(xhrData.param, formData.get('file'), 9898);
    // let config = {
    //   method: "post",
    //   // maxBodyLength: Infinity,
    //   url: xhrData.uploadUrl,
    //   data: formData,
    //   headers: {
    //     "Content-Type": "multipart/form-data"
    //   }
    // };
    // const res = await axios.request(config);
    // modelValue.value = xhrData.accessUrl;
    modelValue.value =
      "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100";
    console.log("uploadImage", res);
  } catch (error) {
    console.log("uploadImage", error);
  }
};
</script>

<style scoped lang="scss">
.hide {
  .el-upload--picture-card {
    display: none;
  }
}
</style>

使用

<HElUpload v-model="form.logo" />

---

自定义缩略图展示区域

<template>
  <div class="imglist" v-if="modelValue">
    <img class="imglist-img" :src="modelValue" />
    <span class="imglist-actions">
      <span class="imglist-delete" @click="handleRemove()">
        <el-icon><IconifyIconOffline :icon="Delete" /></el-icon>
      </span>
    </span>
  </div>
  <!-- v-model:file-list="modelValue" -->
  <el-upload
    v-else
    ref="uploadRef"
    action=""
    :limit="limit"
    list-type="picture-card"
    :auto-upload="true"
    :on-exceed="onExceed"
    :on-change="handleChange"
    :before-upload="onBefore"
    :http-request="uploadBpmn"
  >
    <el-icon><IconifyIconOffline :icon="Plus" /></el-icon>
    <template #tip>
      <div class="el-upload__tip">只能上传jpeg/jpg/png文件</div>
    </template>
    <!-- <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" />
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><IconifyIconOffline :icon="Delete" /></el-icon>
          </span>
        </span>
      </div>
    </template> -->
  </el-upload>
</template>

<script setup>
defineOptions({
  name: "HElUpload"
});
import { ref, reactive, computed, defineProps, defineEmits } from "vue";
import Plus from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import { message } from "@/utils/message";
import { uploadParamUpload } from "@/api/launchpad";
const props = defineProps({
  modelValue: {
    type: String,
    default: () => ""
  },
  limit: {
    type: Number,
    default: 1
  }
});

const emits = defineEmits(["update:modelValue"]);

const modelValue = computed({
  get() {
    return props.modelValue;
    // [
    //   {
    //     url: props.modelValue
    //   }
    // ];
  },
  set(val) {
    emits("update:modelValue", val);
  }
});

const uploadRef = ref();
const disabled = ref(false);
// 文件状态改变时
const handleChange = (response, file, fileList) => {
  console.log("handleChange", response, file, fileList);
  // modelValue.value = response.url;
};

const uploadBpmn = val => {
  console.log("uploadBpmn", val);
};
/** 上传文件前校验 */
const onBefore = file => {
  console.log("onBefore", file);

  if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
    message("只能上传图片");
    return false;
  }
  const isExceed = file.size / 1024 / 1024 > 4;
  if (isExceed) {
    message(`单个图片大小不能超过4MB`);
    return false;
  }
  getUploadParamUpload(file);
};
/** 超出最大上传数时触发 当超出限制时*/
const onExceed = () => {
  message("最多上传1张图片，请先删除在上传");
};
const handleRemove = file => {
  console.log("handleRemove", file);
  modelValue.value = "";
  // uploadRef.value.clearFiles();
};

// 获取头像上传参数
const getUploadParamUpload = async file => {
  try {
    let params = {
      contentType: file.type || "image/png"
    };
    const {
      data: { data }
    } = await uploadParamUpload(params);
    console.log("getUploadParamUpload", data);
    uploadImage(data, file);
  } catch (error) {
    console.log("getUploadParamUpload", error);
  }
};

// 上传图片
const uploadImage = async (xhrData, file) => {
  console.log("uploadImage", xhrData, file);
  try {
    // const formData = new FormData();
    // for (const key in xhrData.param) {
    //   const value = xhrData.param[key];
    //   formData.append(key, value);
    // }
    // formData.append("file", file.raw);
    // // console.log(xhrData.param, formData.get('file'), 9898);
    // let config = {
    //   method: "post",
    //   // maxBodyLength: Infinity,
    //   url: xhrData.uploadUrl,
    //   data: formData,
    //   headers: {
    //     "Content-Type": "multipart/form-data"
    //   }
    // };
    // const res = await axios.request(config);
    // modelValue.value = xhrData.accessUrl;
    modelValue.value =
      "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100";
    console.log("uploadImage", res);
  } catch (error) {
    console.log("uploadImage", error);
  }
};
</script>

<style scoped lang="scss">
.imglist {
  width: 148px;
  height: 148px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--el-border-color);
  .imglist-img {
    width: 100%;
    height: 100%;
  }
  .imglist-actions {
    align-items: center;
    background-color: var(--el-overlay-color-lighter);
    color: #fff;
    cursor: default;
    display: inline-flex;
    font-size: 20px;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity var(--el-transition-duration);
    width: 100%;
    span {
      display: inline-flex;
      cursor: pointer;
    }
    &:hover {
      opacity: 1;
    }
    .imglist-delete {
    }
  }
}

.hide {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>

---

处理后优化版-数据回显展示

<template>
  <!-- <div class="imglist" v-if="isEdit">
    <img class="imglist-img" :src="modelValue" />
    <span class="imglist-actions">
      <span class="imglist-delete" @click="handleRemove()">
        <el-icon><IconifyIconOffline :icon="Delete" /></el-icon>
      </span>
    </span>
  </div> -->
  <!-- v-model:file-list="modelValue" -->
  <el-upload
    ref="uploadRef"
    v-model:file-list="fileListData"
    action=""
    :limit="limit"
    list-type="picture-card"
    :auto-upload="true"
    :on-exceed="onExceed"
    :on-change="handleChange"
    :before-upload="onBefore"
    :http-request="uploadBpmn"
  >
    <el-icon><IconifyIconOffline :icon="Plus" /></el-icon>
    <template #tip>
      <div class="el-upload__tip">只能上传jpeg/jpg/png文件</div>
    </template>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" />
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><IconifyIconOffline :icon="Delete" /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</template>

<script setup>
defineOptions({
  name: "HElUpload"
});
import { ref, reactive, computed, defineProps, defineEmits } from "vue";
import Plus from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import { message } from "@/utils/message";
import { uploadParamUpload } from "@/api/launchpad";
import axios from "axios";
const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: () => ""
  },
  limit: {
    type: Number,
    default: 1
  },
});

const emits = defineEmits(["update:modelValue"]);
const fileListData = computed(() => {
  return modelValue.value
    ? [
        {
          url: modelValue.value
        }
      ]
    : [];
});
const modelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  }
});

const uploadRef = ref();
const disabled = ref(false);
// 文件状态改变时
const handleChange = (response, file, fileList) => {
  console.log("handleChange", response, file, fileList);
  // modelValue.value = response.url;
};

const uploadBpmn = response => {
  console.log("uploadBpmn", response);
  getUploadParamUpload(response.file);
  uploadRef.value.clearFiles();
};
/** 上传文件前校验 */
const onBefore = file => {
  console.log("onBefore", file);

  if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
    message("只能上传图片");
    return false;
  }
  const isExceed = file.size / 1024 / 1024 > 4;
  if (isExceed) {
    message(`单个图片大小不能超过4MB`);
    return false;
  }
};
/** 超出最大上传数时触发 当超出限制时*/
const onExceed = () => {
  message("最多上传1张图片，请先删除在上传");
};
const handleRemove = file => {
  console.log("handleRemove", file);
  modelValue.value = "";
  uploadRef.value?.clearFiles();
};

// 获取头像上传参数
const getUploadParamUpload = async file => {
  try {
    let params = {
      contentType: file.type || "image/png"
    };
    const {
      data: { data }
    } = await uploadParamUpload(params);
    console.log("getUploadParamUpload", data);
    uploadImage(data, file);
  } catch (error) {
    console.log("getUploadParamUpload", error);
  }
};

// 上传图片
const uploadImage = async (xhrData, file) => {
  console.log("uploadImage", xhrData, file);
  try {
    const formData = new FormData();
    for (const key in xhrData.param) {
      const value = xhrData.param[key];
      formData.append(key, value);
    }
    formData.append("file", file);
    // console.log(xhrData.param, formData.get('file'), 9898);
    let config = {
      method: "post",
      // maxBodyLength: Infinity,
      url: xhrData.uploadUrl,
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data"
      }
    };
    const res = await axios.request(config);
    modelValue.value = xhrData.accessUrl;
    console.log("uploadImage", res);
  } catch (error) {
    modelValue.value = "";
    uploadRef.value.clearFiles();
    console.log("uploadImage", error);
  }
};
</script>

<style scoped lang="scss">
.imglist {
  width: 148px;
  height: 148px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--el-border-color);
  .imglist-img {
    width: 100%;
    height: 100%;
  }
  .imglist-actions {
    align-items: center;
    background-color: var(--el-overlay-color-lighter);
    color: #fff;
    cursor: default;
    display: inline-flex;
    font-size: 20px;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity var(--el-transition-duration);
    width: 100%;
    span {
      display: inline-flex;
      cursor: pointer;
    }
    &:hover {
      opacity: 1;
    }
    .imglist-delete {
    }
  }
}

.hide {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>