1.template设置(核心:"auto-upload"为false;on-change获取文件流)

      <el-upload
            class="upload-demo"
            action
            accept=".doc,.docx,.pdf"
            ref="upload"
            :auto-upload="false"
            :before-remove="beforeRemove"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :limit="1"
            :file-list="ruleForm.file"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传doc、docx、pdf文件
            </div>
          </el-upload>

2.methods设置(核心:accept是个纸老虎,骗人的,需要自己对文件格式进行判断)

    // 获取文件
    handleChange(file, fileList) {
      let self = this;
      if (file.size / (1024 * 1024) > 50) {
        // 限制文件大小
        self.$message.warning(`当前限制文件大小不能大于50M`);
        self.file = "";
        self.ruleForm.file = [];
        return false;
      }
      let suffix = self.getFileType(file.name); //获取文件后缀名
      let suffixArray = ["doc", "docx", "pdf"]; //限制的文件类型
      if (suffixArray.indexOf(suffix) === -1) {
        self.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000
        });
        self.file = "";
        self.ruleForm.file = [];
        return false;
      } else {
        self.file = file.raw;
        self.ruleForm.file = fileList;
      }
    },
    getFileType(name) {
      let startIndex = name.lastIndexOf(".");
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase();
      } else {
        return "";
      }
    },

    // 上传数量提示
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning(`当前限制选择1个文件`);
    },
    // 移除文件提示
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    }

3.修改为form表单上传数据格式(核心:new FormData();form.append(field,val))

    //上传
    upload_plan() {
      let self = this;
      let form = new FormData();
      form.append("proclaimName", self.ruleForm.proclaimName);
      form.append("proclaimType", self.ruleForm.proclaimType);
      form.append("proclaimContent", self.ruleForm.proclaimContent);
      form.append("file", self.file);
      axios
        .post("/tpra/proclam/issue", form, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then((res) => {
          self.file = "";
          self.ruleForm = {
            proclaimName: "",
            proclaimType: "",
            issuerTime: "",
            proclaimContent: "",
            attachmentName: "",
            file: []
          };
          if (res.data.code == 200) {
            self.$message.success("上传成功!");
          } else {
            self.$message.warning("上传失败!");
          }
          self.$router.push({
            path: "/informationPublicity/informationPublicityList"
          });
        });
    },
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐