2023.04.12 vue3.x+ts+elementPlus封装上传图片

1.html

  <div class="flex">
    <template v-if="fileAll.length">
      <div v-for="(item, i) in fileAll" :key="i" class="up-show posr">
        <img
          :src="item.url"
          alt=""
          @mouseover="imgEnter(item)"
          @mouseleave="imgLeave(item)"
        />
        <span
          class="icon-box"
          v-show="item.isShow"
          @mouseover="imgEnter(item)"
          @mouseleave="imgLeave(item)"
        >
          <span class="big-icon posa cp" @click.stop="upPreview(item)">
            <el-icon><ZoomIn /></el-icon>
          </span>
          <span class="del-icon posa cp"  @click.stop="upRemove(i)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
    <el-upload
      v-model:file-list="fileList"
      :show-file-list="false"
      :action="action"
      :headers="headers"
      :data="upData"
      :limit="1"
      list-type="picture-card"
      :on-success="upSuccess"
      :on-error="upError"
      :on-change="upChange"
      :before-upload="beforeUpload"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
  </div>
  <teleport to="#fl-dialog">
    <el-dialog v-model="isDialog" class="up-show-img" title="查看上传图片" width="30%" center>

      <img  :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </teleport>
  
  <!-- 确定删除 -->
  <Dialog
    :isShow="isDel"
    :title="'确认删除当前图片吗?'"
    :sucTxt="'确认删除'"
    @closeClick="isDel = false"
    @sucClick="receiveSuc"
  >
  </Dialog>

2.js   fileList这个默认值可以使用props获取

<script lang="ts" setup>
import Dialog from "@/components/common/dialog/index.vue";
import { Loading } from "@/components/common/loading/loading";
import { API_BASE_URL } from "@/utils/urlConfig";
import Message from "@/components/common/message/message";
import { StatusCode } from "@/utils/common-enum";
import { watch, reactive, toRefs, ref, defineProps } from "vue";
import type {
  UploadProps,
  UploadUserFile,
  UploadFile,
  UploadFiles,
  UploadRawFile,
} from "element-plus";
// 默认值
const fileList = ref<UploadUserFile[]>([]);
const action = API_BASE_URL + "v1/home/imgupdalod";
const headers = {
  Authorization: localStorage.token || "",
};
const dialogImageUrl = ref("");
const isDialog = ref(false);
// 所有图片
interface Data {
  fileAll: {
    url: string;
    isShow: boolean;
  }[];
  isDel:boolean
}
const fileAllObj: Data = reactive<Data>({
  fileAll: [],
  isDel:false
});
const upData = reactive({
  imgFile: {},
});
const beforeUpload = (rawFile: UploadRawFile) => {
  //   console.log(rawFile);
  Loading.show();
};
const upChange = (uploadFile: any, uploadFiles: UploadFiles) => {
  upData.imgFile = uploadFile.raw;
};
const upSuccess: UploadProps["onSuccess"] = (
  res: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  Loading.hide();
  if (res.code === StatusCode.code0) {
    // fileList.value.length = 0.
    const d = {
      url: res.data,
      isShow: false,
    };
    fileAllObj.fileAll.push(d);
    emit("imgListAll", fileAllObj.fileAll);
  } else {
    Message.error(res.message || "上传图片接口报错");
  }
};
const upError: UploadProps["onError"] = (
  err: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  Loading.hide();
  console.log(err);
};
const imgEnter = (item: { url: string; isShow: boolean }) => {
  item.isShow = true;
};
const imgLeave = (item: { url: string; isShow: boolean }) => {
  item.isShow = false;
};

// 放大
const upPreview = (item: { url: string; isShow: boolean }) => {
  dialogImageUrl.value = item.url;
  isDialog.value = true;
};
// 删除
let curI = -1
const upRemove= (i:number) => {
    fileAllObj.isDel = true
    curI = i
};
const receiveSuc = () => {
    fileAllObj.fileAll.splice(curI,1)
    fileAllObj.isDel = false
}
const emit = defineEmits(["imgListAll"]);
const { fileAll, isDel } = toRefs(fileAllObj);
// const props = defineProps<{
// }>();
</script>

3.css

<style scoped lang="scss">
.up-show {
  width: 120px;
  height: 60px;
  margin-right: 16px;
  img {
    width: 120px;
    height: 60px;
    margin-right: 16px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
  }
  .icon-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    .big-icon {
      top: 20px;
      left: 30px;
      font-size: 20px;
      color: #fff;
    }
    .del-icon {
      top: 20px;
      right: 30px;
      font-size: 20px;
      color: #fff;
    }
  }
}

.up-show-img {
  img{
    display: block;
    margin: 0 auto;
  }
}
</style>