处理文件上传和怎么处理对象的key和value都是变量的情况
处理文件上传和怎么处理对象的key和value都是变量的情况
写在前面
一直不更行任何的东西，毕竟年终了，项目比较着急，没有什么时间写，我们这老家的天气也着实冷的狠，真的是不想碰笔记本，但是不更新吧也不行，今天简单的说一下几个点，一个是文件上传，一个是怎么处理key和value都是变量的情况。## vue文件上传文件上传一直是我们处理数据的时候的一个比较烦人的点，原因是文件本身属性比较多，很多时候后端要求的东西是不一样的，那么我们也要做出对应的处理上传才可以，否则是不行的，今天我们就举个例子说一下文件怎么上传。
效果图
这个是我我做出来的一个效果图，我们在写的时候呢需要注意几个点.
- 第一是一般情况下弹框提示用户操作的时候后面事不可以被操作的，也就是说会有一个蒙层在上面
- 第二个点就是我们一般上传文件使用的inout的type=file属性进行拉起选择文件的，这个时候他自带的其实是这个样子的，
那这个是肯定不对的，怎么办呢？所以这里也是需要我们处理掉的一个点
- 第三就是我们点击取消或者确认按钮的时候其实是将蒙层和当前的弹框一起全部取消掉才是正确的
- 第四是我们上传的时候文件格式的问题。如果不处理文件格式，上传的时候会导致一直给的参数都是空值。
下面就针对这几个点，我们简单的说一下，文件上传的时候需要怎么处理。
页面源码
<div class="mongolia_tip" v-show="mongolia_tip" @click="hidden_card">
<div @click.stop>
<el-card class="upload_flag_tip">
<div>
谨慎使用：上传文件配置酒店信息时，会清除当前酒店的所有房间信息，
仅建议在第一次配置酒店时使用。说明：请使用系统提供模板
</div>
<button class="btn_cancel" @click="opt_upload('cancel')">取消</button>
<input type="button" class="btn_btn" value="确认" @click="opt_upload('yes')" />
<input type="file" class="btn_yes" ref="file" @click="opt_upload('yes')" @change="preview($event)" />
</el-card>
</div>
</div>css样式源码
.mongolia_tip {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1002;
}这个是遮罩层的样式，也就是我之前提到的弹出框的时候不可以直接弹出来，还要保证的是后面的不可以点击，这样做出来的效果才是比较理想的一个效果。 JS源码
/**
* @opt_upload 操作上传
*/
opt_upload(opt) {
if (opt === 'cancel') {
this.upload_flags = false;
this.mongolia_tip = false;
} else {
this.upload_flags = false;
this.mongolia_tip = false;
}
},
/**
* @preview 选择文件
*/
preview(event) {
//将文件本身获取到
let files = this.$refs.file.files;
let formData = new FormData();
formData.append("file", files[0])
this.$axios({
method: 'post',
url: this.api.api_jjb_9114 + 'room/room_status/add_room_map_with_csv/',
headers: {
'Content-type': 'multipart/form-data'
},
data: formData
}).then((res) => {
console.info(res)
if (res.data.message === 'success') {
this.hintInfo('success', '操作成功')
} else {
this.hintInfo('warning', '操作失败')
}
}).catch((err) => {
console.error(err)
})
//var file = event.target.files
//console.info(file)
},这里简单的解释一下上面的代码，其实没有什么高深的东西，都是一些基本的，首先是控制遮罩层的显示与隐藏的，第一段函数，下面的是控制上传的请求接口，没有别的什么功能。这里需要注意一点的是下面这段代码：
let formData = new FormData();
formData.append("file", files[0])简单的解释一下这里为什么一定要做FormData的处理，不使用旧有的application/x-www-form-urlencoded：因为此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。 这里基本上就可以将文件直接传递给后端了，也是没有问题的。
怎么处理key和value都是变量的情况
这个真的要说一下，这个是很头疼的一件事，为什么这么说呢，说来话长，好好的数据结构不用，非要使用一些奇葩的数据结构，不过回头想想也是一件好事，不是这个数据结构的话，也不会出现这篇文章了，下面就简单的说一下怎么回事。 我们需要的结果是这样的：
源代码是这样的：
let source_data = [{
name: "JACK",
sex : 25
},{
name: "MARRY",
sex : 26
},{
name: "JIM",
sex : 29
},{
name: "CLEARLOVE",
sex : 28
},{
name: "MACKER",
sex : 24
},{
name: "HERRY",
sex : 22
}]
console.info("源数据：")
console.info(source_data)
let result_data = {}
source_data.map((resp,index) => {
result_data[resp.name] = resp.sex
})
console.info("结果数据：")
console.info(result_data)这里就是一个典型的对象里面的keyvalue值都是一个变量的情况，这种数据格式不是很多，但是也是一个可以遇见的格式，所以还是需要我们注意一下的。
写在最后
最近公司和个人的事情都比较多，帖子更新的着实是很慢，其实我自己也是很着急的，但是时间有限，真的是没有什么办法，确实也找不到一些好一点的值得写的文章，不想为了更新而更新，那这个平台就没有任何的意义了，所以这里还是想说一下就是虽然更新的慢，但是写的都是我自己遇到的一些真实存在的一些问题，希望可以真实的帮助到一些和我一样的人，不再同一个问题上浪费更多的时间和精力，谢谢阅读。