当前位置：首页 > article >正文

el-upload照片墙二次封装

article 2024/12/27 15:54:54

基于el-upload文件上传组件的二次封装。

使用场景一般是提交表单中的附属信息，组件要实现的是图片的上传，还有图片的回显。那么现在给出组件代码。

<template>
  <div>
    <el-upload
      action=""
      :http-request="customRequest"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :file-list="fileList"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog
      title="图片详情"
      :visible.sync="dialogVisible"
      append-to-body
      top="56px"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
  
<script>
import { fileUpload, fileDownload } from "@/api/system/common";
export default {
  props: {
    onUploadSuccess: {
      type: Function,
      required: true,
    },
    initialUrls: {
      type: Array,
      default: () => [],
    },
    init: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      action: "",
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
    };
  },
  watch: {
    init() {
      if (!this.init) {
        // 关闭对话框时，重置
        this.fileList = [];
      }
    },
  },
  methods: {
    async updateFileList() {
      const promises = this.initialUrls.map(async (item) => {
        const response = await fileDownload({ path: item.filePath });
        item.url = URL.createObjectURL(new Blob([response.data]));
        return item; // 返回更新后的 item
      });

      // 等待所有的 Promise 完成
      this.fileList = await Promise.all(promises);
    },
    beforeUpload(file) {
      // 限制最多上传三个文件
      if (this.fileList.length >= 3) {
        this.$message.error("最多只能上传三个图片");
        return false; // 返回 false 以阻止上传
      }
      return true; // 允许上传
    },
    customRequest({ file, onSuccess, onError }) {
      const formData = new FormData();
      formData.append("file", file);

      fileUpload(formData)
        .then((response) => {
          return response;
        })
        .then((res) => {
          onSuccess(res); // 调用成功回调
        })
        .catch((error) => {
          onError(error); // 调用错误回调
        });
    },
    handleRemove(file, fileList) {
      // 从 fileList 中移除被删除的文件
      this.fileList = fileList;
      this.onUploadSuccess(this.fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadSuccess(response, file, fileList) {
      const imageUrl = response.url || file.url; // 根据实际情况获取 URL
      this.fileList.push({
        name: file.name,
        url: imageUrl, // 将新上传的图片 URL 添加到列表中
        filePath: response.data.filePath,
      });

      this.onUploadSuccess(this.fileList);
    },
  },
};
</script>

使用了 Element UI 库中的 el-upload 和 el-dialog 组件，用于实现图片上传和预览功能。

父组件调用