阅读 87

input type="file" 方式上传文件,实现多个图片上传然后,存在前端网页,提交得时候一块传给后台实现上传得方式

页面:

 

 

 

 

methods:

 

data:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 代码:

tabClick(tab) {
      if (this.activeName == "config") {
        documents.getVesionByid(this.addinfo.docNumber).then((res) => {
          if (res.success) {
            this.vesionlist = res.data;
          }
        });
      }
    },


submitActioninfo() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          if (this.addinfo.urlList || this.addinfo.fileList.length) {
            console.log(this.addinfo.urlList, this.addinfo.fileList);
          } else {
            return this.$message.warning("请上传文件");
          }
          if (this.editestate) {
            var formdata = new FormData();
            formdata.append("id", this.addinfo.id);
            formdata.append("docNumber", this.addinfo.docNumber);
            formdata.append("title", this.addinfo.title);
            formdata.append("edition", this.addinfo.edition);
            formdata.append("cate", this.addinfo.cate);
            formdata.append("equipmentId", this.addinfo.equipmentId);
            formdata.append("uploadDate", this.addinfo.uploadDate);
            formdata.append("equipmentNodeId", this.addinfo.equipmentNodeId);
            formdata.append("auditor", this.addinfo.auditor);
            formdata.append("userName", this.addinfo.userName);
            formdata.append("urlList", JSON.stringify(this.addinfo.urlList));
            
            for (
              let i = 0;
              i < this.addinfo.fileList.length;
              i++
            ) {
              formdata.append(
                "fileList",
                this.addinfo.fileList[i],
                this.addinfo.fileList[i].name
              );
            }
            // for (
            //   let i = 0;
            //   i < document.getElementById("file").files.length;
            //   i++
            // ) {
            //   formdata.append(
            //     "fileList",
            //     document.getElementById("file").files[i],
            //     document.getElementById("file").files[i].name
            //   );
            // }
            documents.docEdit(formdata).then((res) => {
              if (res.success) {
                this.$alert("编辑成功!", "提示", {
                  confirmButtonText: "确定",
                  callback: async (action) => {
                    this.resetEdit();
                    this.$refs.file.value = null;
                    await this.getlist(); //拉取列表
                  },
                });
              }
            });
          } else {
            this.addinfo.equipmentId = this.searchinfo.equipmentId;
            this.addinfo.equipmentNodeId = this.searchinfo.equipmentNodeId;
            var formdata = new FormData();
            formdata.append("docNumber", this.addinfo.docNumber);
            formdata.append("id", this.addinfo.id);
            formdata.append("title", this.addinfo.title);
            formdata.append("edition", this.addinfo.edition);
            formdata.append("cate", this.addinfo.cate);
            for (
              let i = 0;
              i < this.addinfo.fileList.length;
              i++
            ) {
              formdata.append(
                "fileList",
                this.addinfo.fileList[i],
                this.addinfo.fileList[i].name
              );
            }
            formdata.append("equipmentId", this.addinfo.equipmentId);
            formdata.append("uploadDate", this.addinfo.uploadDate);
            formdata.append("equipmentNodeId", this.addinfo.equipmentNodeId);
            formdata.append("auditor", this.addinfo.auditor);
            formdata.append("userName", this.addinfo.userName);
            documents.addinfo(formdata).then((res) => {
              if (res.success) {
                this.$alert("上传成功!", "提示", {
                  confirmButtonText: "确定",
                  callback: async (action) => {
                    await this.getlist(); //拉取列表
                    this.$refs.file.value = null;
                    this.cancel();
                    this.cancelVesion();
                  },
                });
              }
            });
          }
        }
      });
    },

 

原文:https://www.cnblogs.com/web-aqin/p/14923879.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐