用vue+el-upload+new FormData()实现多图片上传

最新推荐文章于 2024-01-29 14:12:29 发布

Fairyasd

最新推荐文章于 2024-01-29 14:12:29 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fairyasd/article/details/126667903

版权

用vue+el-upload+new FormData()实现多图片上传
如图
在这里插入图片描述

   <div class="relicsImage_content">
      <el-upload
        class="upload_reilcimg"
        ref="uploadImg"
        :action="baseurl + '/antique/batch_img'"
        list-type="picture-card"
        :headers="headers"
        :before-upload="beforeAvatarUploadMore"
        :on-success="handleAvatarSuccess"
        :on-remove="handleRemove"
        :on-change="changeUpload"
        :show-file-list="true"
        accept="image/png, image/jpeg, application/pdf"
        :multiple="true"
        :auto-upload="false"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <p style="font-size: 12px; color: #ccc; margin-top: 20px">
        可上传pdf、jpg、jpeg、png格式，不能超过50M
      </p>
    </div>
    <div>
      <el-button type="primary" @click="uploadSumit()">确定</el-button>
      <el-button @click="reset()">重置</el-button>
    </div>

  data() {
    return {
      ssd: [],
      isActive: false,
      forma: {
        copyReportCode: "",
      },
      list: [],
      page: 1,
      limit: 5, //
      total: 0,
      id: "", //代表选中某一行的id
      multipleSelection: [],
      uploadMoreimg: {
        fileList: [],
      },
      url: this.baseurl + "/antique_levy/upload",
      headers: {
        Authorization: sessionStorage.getItem("token"),
      },
    };
  },
  created() {},
  methods: {
    reset() {
      this.$refs.uploadImg.clearFiles();
    },
    uploadSumit() {
      // 创建新的数据对象
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      this.uploadMoreimg.fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      console.log("提交前", formData.getAll("file"));
      // 自定义上传
      this.axios
        .post("/antique/batch_img", formData)
        .then((response) => {
          console.log(response);
          this.isshowMoreimg = false;
          // if(response.code == 200){
          //   this.$refs.uploadImg.clearFiles();
          //   this.msgSuccess('上传成功！');
          // }else{
          //   this.$message.error(response.msg);
          // }
        })
        .catch((error) => {
          this.$message.error("上传失败！");
        });
    },
    openDialog(employeeId) {
      this.isshowMoreimg = true;
    },
    downLoad(row) {
      this.downloadByA({
        url: this.baseurl + "/collection_copy_report/print?id=" + row.id,
        name: "藏品编目",
      });
    },
    downloadByA({ url, name = "temp" }) {
      // 生成一个a元素
      const a = document.createElement("a");
      // 创建一个单击事件
      const event = new MouseEvent("click");
      // 设置图片名称
      a.download = name;
      // 如果跳转页面，则在其他页面跳转
      a.target = "_blank";
      // 将生成的URL设置为a.href属性
      a.href = url;
      // 触发a的单击事件
      a.dispatchEvent(event);
    },

    // 上传之前
    beforeAvatarUploadMore(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isPdf = file.type === "application/pdf";
      //   const isLt50M = file.size / 1024 / 1024 < 50;
      //   if (!isLt50M) {
      //     this.$message.warning("上传文件大小不能超过 50MB!");
      //     return false;
      //   }
      //   if (!isJPG && !isPng && !isPdf) {
      //     this.$message.warning("只能上传 JPG/PNG/PDF/JPEG 格式!");
      //     return false;
      //   }
    },
    // 上传成功
    handleAvatarSuccess() {},
    // 删除
    handleRemove(file, fileList) {
      this.uploadMoreimg.fileList = fileList;
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    changeUpload(file, fileList) {
      this.uploadMoreimg.fileList = fileList;
    },
  },