简单谈谈el-upload文件上传问题

1.需求因为先不要上传服务器，而是选中文件，最后以FormData形式传递给后台

2.说一下el-upload的属性与方法，也是解题的关键

action=""是指上传莫某个服务器，我这里没用直接上传就用#表示
accept=“.apk” 限制选择文件的类型。因为我这里是还没上传服务器就要提前校验，用不了before-upload
on-preview 是点击文件返回的信息，这里没用到
on-remove 是删除文件返回的信息
multiple 是否支持多选文件，布尔类型
on-change 是文件状态改变时候的返回file信息，获取Files关键方法
before-upload 上传文件之前的钩子函数，一般做直接上传服务器前的校验限制
auto-upload 是否在选取文件后立即进行上传，对于不上传action的非常关键
file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url:
limit 最大允许上传个数
on-exceed 文件超出个数限制时的钩子

3.代码图下实现，主要是通过on-change事件获取到文件File

 <el-form-item
                        :label="$t('manage.SWPkG') +'：'"
                        :label-width="formLabelWidth"
                        class="fileupdown"
                    >
                        <el-input
                            placeholder="no file ..."
                            style="width: 76%"
                            class="input-with-select"
                        >
                            <el-upload
                                class="upload-demo"
                                slot="append"
                                action="#"
                                :on-change="handleChangePic"
                                :on-remove="handleRemoveApk"
                                accept=".apk"
                                :file-list="fileList"
                                :auto-upload="false"
                            >
                                <el-button
                                    slot="trigger"
                                    size="small"
                                    type="success"
                                >choose apk file</el-button>
                            </el-upload>

                        </el-input>
                    </el-form-item>
                    <el-form-item class="fileupdown">
                        <el-input
                            placeholder="no file ..."
                            style="width: 76%"
                            class="input-with-select"
                        >
                            <el-upload
                                class="upload-demo"
                                slot="append"
                                action="#"
                                :on-change="handleChangeTxt"
                                :on-remove="handleRemoveTxt"
                                accept=".txt"
                                :file-list="fileLists"
                                :auto-upload="false"
                            >
                                <el-button
                                    slot="trigger"
                                    size="small"
                                    type="success"
                                >choose text file</el-button>
                            </el-upload>

                        </el-input>
                    </el-form-item>
 handleChangePic(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.apkFiles = fileList[0].raw;
    },
    handleChangeTxt(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.txtFiles = fileList[0].raw;
    },
    handleRemoveApk(file, fileList) {
      console.log(file, fileList);
      this.apkFiles = {};
    },
    handleRemoveTxt(file, fileList) {
      console.log(file, fileList);
      this.txtFiles = {};
    },
    confirmDialog() {
      this.$refs["versionForm"].validate(valid => {
        if (valid) {
          if (
            !this.versionForm.number ||
            !this.versionForm.numberString ||
            !this.versionForm.describe ||
            JSON.stringify(this.apkFiles) === "{}" ||
            JSON.stringify(this.txtFiles) === "{}"
          ) {
            this.$alert(
              this.$t("doctor.completeData"),
              this.$t("doctor.message"),
              {
                confirmButtonText: this.$t("home.yes"),
                callback: () => {}
              }
            );
            return;
          }
          this.formData = new FormData();
          this.formData.append("version", this.versionForm.number);
          this.formData.append("versionName", this.versionForm.numberString);
          this.formData.append("des", this.versionForm.describe);
          this.formData.append("apk", this.apkFiles);
          this.formData.append("mapper", this.txtFiles);

          this.$confirm(this.$t("doctor.confirmSave"), this.$t("home.remind"), {
            confirmButtonText: this.$t("home.yes"),
            cancelButtonText: this.$t("home.cancel"),
            type: "warning"
          })
            .then(() => {
              api.uploadApk(this.formData).then(res => {
                if (res.code == 0) {
                  this.isdisplayDialog = false;
                  this.$alert(res.msg, this.$t("doctor.message"), {
                    confirmButtonText: this.$t("home.yes"),
                    callback: action => {
                      return;
                    }
                  });
                  this.$emit("addgetList");
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg
                  });
                }
              });
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }