el-upload upload attachments (disassembly steps)

Table of contents

1. See elementui/element-plus official website case 

2. HTML part: Move it from the official website, it is best to add a button and upload it to the server (backend)

3. js part:

     3.1 First, define a variable, files 

     3.2 When uploading an image, trigger the ChangeImage method

     3.3 Click [Upload Server] to trigger the UpdateFilesData method

---

Case:

1. See elementui/element-plus official website case 

The following content only shows how to upload attachments and how to upload them to the server. The code of the table will not be displayed.

2. HTML part: Move it from the official website, it is best to add a button and upload it to the server (backend)

  <el-card>
          <el-upload
            drag
            class="upload-demo"
            ref="upload"
            action="#"
            :on-change="ChangeImage"
            :file-list="files"
            :auto-upload="false"
            :show-file-list="true"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-card>
        <el-button
          style="margin-left: 10px;"
          type="success"
          @click="UpdateFilesData"
        >上传到服务器</el-button>

ps:

on-change: called when uploading files

file-list: Uploaded file list, array format, variables defined in data

auto-upload: Whether to upload the file immediately after selecting it

show-file-list: Whether to display the uploaded file list

3. js part: 

    3.1 First, define a variable, files 

data(){
  return:{
    files: [],
    formData: null, //附件上传FormData
  }
}

3.2 When uploading an image, trigger the ChangeImage method

ChangeImage(file, filelist) {
      console.log(file, "on-change事件", filelist);
      this.files = filelist;
    },

Print the result:

3.3 Click [Upload Server] to trigger the UpdateFilesData method

UpdateFilesData() {
      debugger;
      this.formData = new FormData();
      this.files.forEach((item) => {
        if (!(!item.raw && item.url.indexOf("blob") === -1)) {
          this.formData.append("files", item.raw);
        }
      });
      this.formData.append("FileType", 1); //属于第几个附件上传控件
      this.FilesUpdate(); //调用接口
    },

/*
*  调后端的接口（UploadFile）,带参数formData
*/

FilesUpdate() {
      let _this = this;
      this.formData.append("DataID", this.Eid); //属于哪条主表数据
      this.formData.append("MenuID", localStorage.getItem("MenuID")); //属于哪个菜单下
      _this.$EquiApi.UploadFile(this.formData).then((res) => {
        if (res.data.code == 200) {
          this.Refresh(res); //接口返回成功后，调 刷新页面的方法
        }
      });
    },