Vue 表单提交 -- 文件上传

注意：

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对象，不需要对数据做处理。