5.8·

周三

文件上传功能

 

  methods: {
    //by文章id获取附件列表
    getFiles() {
      var articleId = 0;
      articleId = store.state.articleMsg.row.id;
      console.log(articleId);
      this.$store.dispatch("fileManage/getFiles", articleId).then((res) => {
        if (res.succeeded) {
          res.data.forEach((file) => {
            this.fileList.push({ name: file.fileName, id: file.fileId });
          });
        } else {
          this.$message({
            type: "error",
            message: "获取附件失败",
          });
        }
      });
    },
    //上传文件之前
    beforeUpload(file) {
      this.fileList.forEach((item) => {
        if (isEquael(item.fileName, file.name)) {
          return this.$message.warning("该文件已存在");
        }
      });
    },
    // 上传发生变化钩子
    handleFileChange(file, fileList) {
      this.files = fileList;
      this.fileList.push(file);
    },
    //文件个数超过最大限制时
    fileExceed(file, fileList) {
      if (this.fileList.length > 10) {
        this.$message.warning("附件个数不能超过10个");
      }
    },
    //删除前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //删除的钩子
    onRemove(file, fileList) {
      if (file.status === "success") {
        var requestData = file.id;
        this.$store
          .dispatch("fileManage/deleteFile", requestData)
          .then((res) => {
            if (res.succeeded) {
              this.fileList.pop(file);
              this.fileList = [];
              this.files = fileList;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getFiles();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "请求失败!",
            });
          });
      }
    },
    // 提交上传文件

    async submitFileForm() {
            //判断是否有文件再上传
      if (this.files.length === 0) {
        return this.$message.warning("请选取文件后再上传");
      }
      //-- 创建新的数据对象 -->
      let formData = new FormData();
      //-- 将上传的文件放到数据对象中 -->
      this.files.forEach((file) => {
        formData.append("files", file.raw);
      });
        //通知vuex发请求，进行用户的注册
        try {
          //注册成功
          await this.$store
          .dispatch("reqUpload", formData)
          .then((res) => {
          if (res.succeeded) {
            alert("上传成功！");
            this.fileList = [];
            this.getFiles();
          } else {
            alert("上传失败");
          }
        })
        } catch (error) {
          //注册失败
          alert("上传失败！");
      }
      this.dialogVisible = false;
    },
    
    }