vue-element表单内使用上传文件，并和表单其他内容一起上传

vue-element 上传文件

---

表单内使用上传文件，并和表单其他内容一起上传

---

<template>
  <div class="addAppUpdate">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="版本号" prop="version">
        <el-input v-model="ruleForm.version" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="更新日志" prop="log">
        <el-input type="textarea" v-model="ruleForm.log" style="width:500px;"></el-input>
      </el-form-item>
      <el-form-item label="上传文件" prop="apk">
        <el-upload ref="upload" class="upload-demo" action="/manager/appupdate/addAppUpdate" :headers="headers"
          :http-request="httpRequest" :before-remove="beforeRemove" :before-upload="beforeUploadFile" :on-exceed="handleExceed"
          multiple :limit="1" :auto-upload="false" :on-change="getFile" :data="ruleForm" :file-list="fileList" name="annexFile"
          style="width: 500px;">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">{{message}}</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" v-loading.fullscreen.lock="fullscreenLoading">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    addAppUpdate
  } from "../../api/api.js"
  export default {
    name: 'AddAppUpdate',
    data() {
      return {
        fullscreenLoading: false,
        //表单
        ruleForm: {
          version: '', //版本号
          log: '' //更新日志
        },
        //上传
        headers: {
          token: getStore('zxdAdmintoken'),
          "content-type": "multipart/form-data"
        },
        message: '请上传apk文件',
        fileList: [], //文件列表
        fd: {}, //用于放数据  FormData类型

        //校验规则
        rules: {
          version: [{
            required: true,
            message: '请输入版本号',
            trigger: 'blur'
          }, ],
          log: [{
            required: true,
            message: '请填写更新日志',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      //上传
      getFile(file, fileList) {
        this.fileList = fileList;
        // console.log(this.fileList)
        const fd = new FormData() // FormData 对象
        this.fd = fd
      },
      //上传前
      beforeUploadFile(file) {
        let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
        console.log(extension)
        if (extension !== 'apk') {
          // this.$message.warning('只能上传后缀是.zip/.rar/.apk的文件'); //控制文件类型
          this.$message.warning('文件类型不对'); //控制文件类型
          return false
        }
      },
      //超限制
      handleExceed(files, fileList) {
        this.$message.warning("目前只能上传一个包")
      },
      //移除
      beforeRemove(file, fileList) {
        let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
        if (extension !== 'apk') {
          return
        }
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      httpRequest(param) {
        const fileObj = param.file // 相当于input里取得的files
        this.fd.append('apk', fileObj) // 文件对象
        console.log("文件包" + this.fd.get('apk'));
      },
      //提交
      submitForm(formName) {
        // let fileArr = this.$refs.upload.uploadFiles;
        // console.log(fileArr)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.fileList.length <= 0) {
              this.$message.error("至少上传一个包！");
              return;
            }
            this.$refs.upload.submit();
            //换行自动添加为<br/>
            this.ruleForm.log= this.ruleForm.log.replace(/\n/g,"<br/>");
            // console.log(this.ruleForm.log)
            //将表单内其他内容添加进fd
            this.fd.append('version', this.ruleForm.version)
            this.fd.append('log', this.ruleForm.log)
            this.fd.append('type', "0")
            this.fullscreenLoading = true;
            //调用后端接口，提交即可
            addAppUpdate(this.fd).then(data => {
              console.log(data)
              if (data.code == 0) {
                this.fullscreenLoading = false;
                this.$message({
                  message: '上传成功',
                  type: 'success'
                });
                this.fd = {}
                this.fileList = []
                resetForm(formName)
              } else {
                this.$message.error("上传失败");
              }
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs.upload.clearFiles()
      },

    }
  }
</script>

页面显示