注意：
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对象，不需要对数据做处理。
网友评论