注意：

1.必須是post請求，需要設置headers: {'Content-Type':'multipart/form-data'},在這個前提下才能文件上傳。
2.你的文件上傳<input type="file" @change="getFile($event)"/>
外層要有<form enctype="multipart/form-data" name="fileinfo" id="myForm"></form>
3.<input type="file" @change="getFile($event)"/>的change方法很重要，要記得加上，是用來獲取選擇的文件的信息數據。
4.參數傳遞要這么處理：把接口的所有參數通過這個方式加到params里。這樣在控制臺看到的參數格式才是對的，如下圖。
這里遇到一個坑，就是不這么處理，而是簡單的formData = params這么傳遞，auth_user_file看到是｛｝，雖然選擇文件時在控制臺能看到信息，但是作為接口參數傳遞時就為{};

        let formData = new FormData();
        formData.append('auth_user_file', auth_user_file);
        formData.append('op_type', op_type);
        formData.append('modify_users', JSON.stringify(modify_users));
        formData.append('dst_level', dst_level);
        formData.append('comment', comment);
        formData.append('game_id', 2577);
        formData.append('src_type', 0);
        params = formData;

表單參數.png

5.因為我們這個項目的文件上傳項不是必填，也可以選擇手動輸入，如果沒有選擇文件，建議這么處理。
-- headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
-- params = Qs.stringify(params);//處理參數參數作為對象傳遞就可以了，但是要用vue的qs進行處理。參數格式在控制臺看到是這樣的

image.png

關于文件上傳實現的源碼貼在下面，供參考
PermissionSettings.vue

<template>
  <div class="set-box">
    <form enctype="multipart/form-data" name="fileinfo" id="myForm">
    <div class="power-level widths">
      <span>權限級別</span>
      <!--權限級別的文案是： 管理者權限，審核權限 - C級，審核權限 - B級，，審核權限 - A級-->
      <!--操作狀態的文案是： 授予權限，取消權限-->
      <select name="dst_level" id="selectLevel" v-model="formData.dst_level">
        <!--<option selected="selected" disabled="disabled"  style='display: none' value=''></option>-->
        <option value="null" disabled selected hidden>請選擇權限級別</option>
        <option value="0" v-if="Number(admin_level) === 1">普通管理者</option>
        <option value="1">A級</option>
        <option value="2">B級</option>
        <option value="3">C級</option>
      </select>
    </div>
    <div class="power-state widths">
      <span>權限操作狀態</span>
      <select name="op_type" id="selectState" v-model="formData.op_type">
        <option value="null" disabled selected hidden>請選擇授權/取消</option>
        <option value="1" v-if="Number(admin_level) === 1">授予權限</option>
        <option value="2">取消權限</option>
      </select>
    </div>
    <div class="roll widths">
      <span>名單</span>
      <div class="roll-font">
        <!--<p><span></span></p>-->
        <textarea value=""
                  name="modify_users"
                  class="clearfix"
                  id="roll"
                  placeholder="名單類型：QQ號或微信號
請輸入名單，每行僅限一個QQ賬號
或者微信賬號，請以空格鍵隔開"
                  v-model="formData.modify_users"
        ></textarea>
        <div class="roll-list">
            <input type="file" @change="getFile($event)"/>
        </div>

        <div class="roll-model">
          <div>名單文件模板下載：
            <a download="https://courtreport.gamesafe.qq.com/static/report_judge/admin/static/user_template.txt">
              管理平臺授權模板
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="desc widths">
      <span>授權描述</span>
      <div class="roll-font">
        <textarea value=""
                  class="clearfix"
                  v-model="formData.comment"
                  name="comment"
        ></textarea>
        <button class="btn-submit"
                type="button"
                @click="checkForm()"
        >提交處理</button>
      </div>
    </div>
    </form>
    <my-dialog :form-err="formErr" :set-data-txt="setDataTxt">{{setDataTxt}}</my-dialog>
  </div>
</template>

<script>
    import server from "../apis/servers"
    import MyDialog from "./MyDialog";
    export default {
      name: "PermissionSettings",
      components: {MyDialog},
      data(){
        return{
          formData:{
            dst_level: null,
            op_type: null,
            comment: null,
            modify_users: [],
            auth_user_file: null,
          },
          formErr: null,
          setDataTxt: null,
        }
      },
      computed:{
        admin_level(){
          return sessionStorage.getItem("admin_level");
        }
      },
      mounted(){

      },
      methods:{
        setting_modify_user_auth: server.setting_modify_user_auth,
        checkForm(){
          if(this.formData.dst_level === null){
            this.formErr = '權限級別';
            this.$store.commit('changeDialog','settingFormErr');
            return;
          }else if(this.formData.op_type === null){
            this.formErr = '授權/取消';
            this.$store.commit('changeDialog','settingFormErr');
            return;
          }else if(this.formData.comment === null){
            this.formErr = '授權描述';
            this.$store.commit('changeDialog','settingFormErr');
            return;
          }else if(this.formData.modify_users.length === 0 && this.formData.auth_user_file === null){
            this.formErr = '輸入名單/上傳名單';
            this.$store.commit('changeDialog','settingFormErr');
            return;
          }else{
            this.setting_modify_user_auth(
              this.formData.op_type,
              this.formData.modify_users,
              this.formData.comment,
              this.formData.dst_level,
              this.formData.auth_user_file,
              'permission'
            );
          }
        },
        getFile(event) {
          this.formData.auth_user_file = event.target.files[0];
        },
        formReset(){
          this.formData = {
            dst_level: null,
            op_type: null,
            comment: null,
            modify_users: [],
            auth_user_file: null,
          }
        }
      }

    }
</script>

<style scoped>

</style>

servers.js

//修改玩家權限
  setting_modify_user_auth(op_type,modify_users,comment,dst_level,auth_user_file){
    let url = '/cgi-bin/report_judge/qq/modify_user_auth';
    let tableParams = {
      game_id: 2577,//游戲id, 取0表示全量游戲
      src_type: 0,
      op_type: op_type,//1：授權，2：取消
      modify_users: modify_users,//用戶列表, “名單”輸入框中的數據。授予權限的時候，需要以:分割的qq與open_id組合,如果是取消權限只需給出uin列表
      dst_level: dst_level,//設置的目標等級，0：普通管理者權限，1:A類審核權限, 2:B類審核權限, 3: C類審核權限
      comment: comment,//權限變更時的評論語,沒有則為空
    };
    let config = null;
    let params = null;
    //處理文件上傳的參數
      if(auth_user_file !== null){//auth_user_file如果上傳文件了，就不手動輸入名單了
        let formData = new FormData();
        formData.append('auth_user_file', auth_user_file);
        formData.append('op_type', op_type);
        formData.append('modify_users', JSON.stringify(modify_users));
        formData.append('dst_level', dst_level);
        formData.append('comment', comment);
        formData.append('game_id', 2577);
        formData.append('src_type', 0);
        params = formData;
        config = {
          headers: {'Content-Type':'multipart/form-data'}
        }
      }else{
        params = tableParams;
        //處理modify_users參數
        if(params.modify_users.length === 0){
          return;
        };
        let arr = [];
        arr.push(params.modify_users);
        params.modify_users = params.modify_users.indexOf(" ") > -1 ? params.modify_users.split(" ") : arr;
        params.modify_users = JSON.stringify(params.modify_users);
        params = Qs.stringify(params);//處理參數
        config = {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }
      }
      this.$axios.post(url, params,config)
      .then(response => {
        let dst_level_txt = Number(dst_level) === 0 ? "管理權限" : "審判權限";
        let op_type_txt = Number(op_type) === 1 ? "授權" : "取消";
        if (response.data.ret === 0) {
          this.formReset();
          if(op_type === 1){
            this.setDataTxt = `${op_type_txt}成功 – “${dst_level_txt}”${op_type_txt}成功，請知會被授權人確認；`;
          }else{
            this.setDataTxt = `取消成功 – ”${dst_level_txt}“取消成功；`;
          };
        }else if (response.data.ret === 17) {
          this.$loginOut();
        }else{
          this.setDataTxt = `${op_type_txt}失敗 – ”${dst_level_txt}“${op_type_txt}失敗，請重新嘗試；`;
        };
        this.$store.commit('changeDialog','setDataTxt');
      })
      .catch(error => {

      })
  },

$.ajax文件上傳：
報錯

image.png

增加參數：processData設置為false。因為data值是FormData對象，不需要對數據做處理。