vue 文件及描述信息一起上传_Vue 表单提交 -- 文件上传

注意：

1.必须是post请求，需要设置headers: {'Content-Type':'multipart/form-data'},在这个前提下才能文件上传。

2.你的文件上传

外层要有

3.的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

权限级别

请选择权限级别

普通管理者

A级

B级

C级

权限操作状态

请选择授权/取消

授予权限

取消权限

名单

name="modify_users"

class="clearfix"

id="roll"

placeholder="名单类型：QQ号或微信号

请输入名单，每行仅限一个QQ账号

或者微信账号，请以空格键隔开"

v-model="formData.modify_users"

>

名单文件模板下载：

管理平台授权模板

授权描述

class="clearfix"

v-model="formData.comment"

name="comment"

>

type="button"

@click="checkForm()"

>提交处理

{{setDataTxt}}

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,

}

}

}

}

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