log-server-web/src/view/gameTask/upload.vue

<template>
    <div class="addFileUpdate">
      <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="gameid" prop="game_id">
          <el-input type="textarea" v-model="ruleForm.game_id" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="上传文件" prop="file">
          <el-upload ref="upload" class="upload-demo" action="/manager/appupdate/addFileUpdate" :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 {
      addFileUpdate
    } from "../../api/upload.js"
    export default {
      name: 'AddFileUpdate',
      data() {
        return {
          fullscreenLoading: false,
          //表单
          ruleForm: {
            game_id: '' //游戏id
          },
          //上传
          headers: {
            // token: getStore('zxdAdmintoken'),
            "content-type": "multipart/form-data"
          },
          message: '请上传dll文件',
          fileList: [], //文件列表
          fd: {}, //用于放数据  FormData类型
  
          //校验规则
          rules: {
            game_id: [{
              required: true,
              message: '请输入游戏id',
              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 !== 'dll') {
            // 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 !== 'dll') {
            return
          }
          return this.$confirm(`确定移除 ${file.name}？`)
        },
        httpRequest(param) {
          const fileObj = param.file // 相当于input里取得的files
          this.fd.append('file', fileObj) // 文件对象
          console.log("文件包" + this.fd.get('file'));
        },
        //提交
        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('game_id', this.ruleForm.game_id)
              // this.fd.append('log', this.ruleForm.log)
              this.fd.append('type', "0")
              this.fullscreenLoading = true;
              //调用后端接口，提交即可
              addFileUpdate(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>