elmentui[上传组件el-upload配合axios进行文件上传操作]

最新推荐文章于 2024-04-10 08:30:00 发布

墨水白云

最新推荐文章于 2024-04-10 08:30:00 发布

阅读量4k

点赞数

分类专栏： elementui

本文链接：https://blog.csdn.net/lxy869718069/article/details/105684677

版权

elementui 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文件上传操作

方式一：直接使用elementui本身的上传组件进行

<template>
  <!-- 官方的图片上传修改组件，目的是将上传的文件抛出去，根据适当的需要而进行适当的修改 -->
  <div class="el-upload-box">
    <div class="upload-box">
      <el-upload
        ref="myUpload"
        multiple
        list-type="picture-card"
        :action="'http://10.01.01.01:8800/xx'"
        :data="{ projectType: 1 }"
        :limit="maxLength"
        :file-list="pictureList"
        :before-upload="beforeUpload"
        :on-success="uploadSucess"
        :on-error="uploadError"
        :on-exceed="uploadExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :class="{ 'upload-disabled': currentFileListLengthDisabled }"
      >
        <!--这个属性可以让按钮消失  -->
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <p class="el-upload__tip">
        {{ currentFileListLength }}/{{
          maxLength
        }}张，只能上传jpg/jpeg/png文件，且不超过10M
      </p>
    </div>
    <el-button type="primary" :loading="pictureLoading" @click="uploadPicture"
      >上传按钮</el-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 图片上传
      dialogVisible: false, // 图片放大dialog
      dialogImageUrl: "", // 图片放大地址
      currentFileListLength: 0, // 图片数量(用于判断所有图片是否都已成功上传)
      maxLength: 9, // 最大上传几张
      pictureLoading: false, // 图片上传时候loading状态
      // 图片列表
      pictureList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },
  computed: {
    // 上传张数大于限制张数的时候将上传框隐藏
    currentFileListLengthDisabled() {
      if (this.currentFileListLength >= this.maxLength) {
        return true;
      } else {
        return false;
      }
    }
  },
  created() {
    console.log(this.$store.state.fileUploadUrl);
    // 进入之前就需要图片的长度（在给pictureList赋值之后就需要进行长度判断）
    this.currentFileListLength = this.pictureList.length;
  },
  methods: {
    // 上传之前
    beforeUpload(file) {
      this.pictureLoading = true; // 按钮加载状态打开
      this.currentFileListLength = this.pictureList.length; // 当前图片长度
      // 格式、大小限制
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt = file.size / 1024 / 1024 < 10; // 大小控制 10 为 10M
      if (!isJPG) {
        this.$message.error("只能上传 JPG / PNG / JPEG 格式图片!");
      }
      if (!isLt) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLt;
    },
    // 上传成功
    uploadSucess(response, file, fileList) {
      this.pictureList = fileList;
      if (response) {
        // 上传成功一次就增加一张，直到上传完毕
        ++this.currentFileListLength;
        if (this.currentFileListLength === fileList.length) {
          this.pictureLoading = false;
        }
      }
    },
    // 上传失败
    uploadError(err) {
      if (err) {
        this.pictureLoading = false;
        this.$message.error("图片上传失败！");
      }
    },
    // 图片超过限制limit=""
    uploadExceed() {
      this.$message.warning("一次最多只可上传" + this.maxLength + "张图片");
    },
    // 点击图片删除图标
    handleRemove(file) {
      this.pictureLoading = false;
      // 注意：这里删除的字段需要根据实际情况来决定
      this.pictureList = this.pictureList.filter(item => item.url !== file.url); // 删除时候过滤掉被删除的内容
      this.currentFileListLength = this.pictureList.length;
    },
    // 点击图片放大图标
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传按钮
    uploadPicture() {
      console.log("图片列表", this.pictureList);
    }
  }
};
</script>
<style lang="scss">
.el-upload-box {
  .upload-box {
    .upload-disabled {
      display: none !important;
    }
  }
}
</style>

方式二：直接使用elementui本身的自定义上传功能封装一个组件

<template>
  <!--
    自定义文件上传组件
    将本组件包裹住需要点击触发上传的内容
    设置好handleSuccess事件即可获得数据内容
  -->
  <div class="upload-component" :style="{ height: inHeight, width: inWidth }">
    <!--上传形式为图片jps,png,jpeg-->
    <div v-if="uploadType === 'picture'" class="picture-box">
      <el-upload
        class="picture"
        action="/"
        :show-file-list="false"
        accept="image/png,image/jpeg,image/jpg"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
        :http-request="uploadLicencePicNo"
      >
        <slot></slot>
      </el-upload>
    </div>
    <!--上传形式为文件pdf,doc,docx-->
    <div v-else-if="uploadType === 'file'" class="file-box">
      <el-upload
        class="file"
        action="/"
        :show-file-list="false"
        :before-upload="beforeAvatarUploadFile"
        accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
        :on-success="handleAvatarSuccess"
        :http-request="uploadLicencePicNo"
      >
        <slot></slot>
      </el-upload>
    </div>
    <!--上传为任何形式-->
    <div v-else>
      <el-upload
        class="file"
        action="/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :http-request="uploadLicencePicNo"
      >
        <slot></slot>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: "custom-upload",
  props: {
    type: {
      // 用于标记当前组件的类型名称，在上传成功后抛出用于区分多次引用的情况，如idcardHeadNo、idcardNationalNo、lawyerFileNo
      type: String,
      default: ""
    },
    inHeight: {
      // 控制组件高度
      type: String,
      default: "auto"
    },
    inWidth: {
      // 控制组件宽度
      type: String,
      default: "auto"
    },
    fileCate: {
      // 文件分类[profile资料信息;evidence证据文件;cases案件文件]
      type: String,
      default: ""
    },
    uploadType: {
      // 上传类型，如果是文件则是file,如果是图片则是picture
      type: String,
      default: "picture"
    }
  },
  data() {
    return {
      // 格式验证
      contractAccept:
        "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
    };
  },
  methods: {
    // 图片上传前格式与大小验证
    beforeAvatarUpload(file) {
      let isPass = false;
      if (
        file.type === "image/png" ||
        file.type === "image/jpeg" ||
        file.type === "image/jpg"
      ) {
        isPass = true;
      }
      const isLt = file.size / 1024 / 1024 < 10;
      if (!isPass) {
        this.$message.error("当前仅支持上传图片JPG/jpeg/png格式!");
        return false;
      }
      if (!isLt) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      }
      return isPass && isLt;
    },
    // 文件上传前格式验证
    beforeAvatarUploadFile(file) {
      let isPass = false;
      if (this.contractAccept.indexOf(file.type) !== -1) {
        isPass = true;
      }
      if (!isPass) {
        this.$message.error("当前仅支持上传文件pdf/doc/docx!");
        return false;
      }
      return isPass;
    },
    // 文件-图片-上传成功返回内容
    handleAvatarSuccess(res) {
      if (res) {
        let arr = {
          type: this.type,
          data: res.data
        };
        // 抛出的数据内容
        this.$emit("handleSuccess", arr);
        this.$message.success("上传成功！");
      }
    },
    // 文件-图片-上传操作
    uploadLicencePicNo(e) {
      e.file.fileCate = this.fileCate;
      // 调用上传接口将文件传递给后台
      uploadFile(e).then(() => {});
    }
  }
};
</script>

<style lang="scss">
.upload-component {
  display: inline;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
</style>