VUE+ElementUI Form表单文件上传

1.Form表单标签里使用elementUI Upload 上传

<el-form ref="form" :model="form" :rules="rules">
        <el-row>
          <el-col :span="3">
            <el-radio-group v-model="radio" @change="inputSelect">
              <el-radio-button label="文件"></el-radio-button>
              <el-radio-button label="链接"></el-radio-button>
            </el-radio-group>
          </el-col>

          <el-col :span="12" v-if="updateIf">
            <el-form-item>
              <el-upload
                class="upload-demo"
                ref="upload"
                :show-file-list="false"
                :action="upload.url"
                :auto-upload="false"
                :before-upload="beforeAvatarUpload"
                :on-change="handleChange"
                :data="upData"
                :on-success="handleSuccess"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="inputIf">
            <div class="inputDiv">
              <el-form-item>
                <el-input placeholder="请输入内容" v-model="form.input">
                  <template slot="prepend">https://</template>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
<el-button type="primary" @click="submitUpload('form')">开始转换</el-button>

2.Return和Computed

 return {
      //上传
      upload: {
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/transcode/transcodeFile",
      },
      // 表单参数
      form: {
        //源文件名
        srcFileName: "",
        //输出文件名
        destFileName: "",
        //模板名称
        template: "",
      },
      //表单校验
      rules: {
        destFileName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
      },
    };
  computed: {
    // 这里定义上传文件时携带的参数，即表单数据
    upData: function () {
      return {
        transcodeInfo: JSON.stringify(this.form),
      };
    },
  },

3.  methods

     /* 只允许上传一个文件，继续上传覆盖前一个文件 */
    handleChange(file, fileList) {
      if (fileList.length > 1 && file.status !== "fail") {
        fileList.splice(0, 1);
      } else if (file.status === "fail") {
        errorMsg("上传失败，请重新上传！");
        fileList.splice(0, 1);
      }
      this.beforeAvatarUpload(file);
    },
    /* 文件上传成功时 删除文件列表 */
    handleSuccess(res, file, fileList) {
      this.$refs["upload"].clearFiles();
    },
    /* 限制文件格式和大小 */
    beforeAvatarUpload(file) {
      const isLt2G = file.size / 1024 / 1024 / 1024 < 2;
      if (!isLt2G) {
        this.$message.error("上传文件大小不能超过 2GB!");
      }
      return isLt2G;
    },
 // 表单重置
    reset() {
      this.form.srcFileName = "";
      this.form.destFileName = "";
      this.form.template = "";
    },
 /* 开始转换 */
    submitUpload(form) {
      if (this.form.srcFileName == "") {
        this.$message.error("请上传文件");
      } else if (this.form.template == "") {
        this.$message.error("请选择模板");
      } else if (this.form.destFileName == "") {
        this.$message.error("请填写输出文件名称");
      } else {
        this.$refs[form].validate(async (valid) => {
          if (valid) {
            // 表单验证通过后使用组件自带的方法触发上传事件
            this.$refs.upload.submit();
            this.reset();
            this.setTimer();
          } else {
            return false;
          }
        });
      }
    },