一直不更行任何的东西,毕竟年终了,项目比较着急,没有什么时间写,我们这老家的天气也着实冷的狠,真的是不想碰笔记本,但是不更新吧也不行,今天简单的说一下几个点,一个是文件上传,一个是怎么处理key和value都是变量的情况。## vue文件上传文件上传一直是我们处理数据的时候的一个比较烦人的点,原因是文件本身属性比较多,很多时候后端要求的东西是不一样的,那么我们也要做出对应的处理上传才可以,否则是不行的,今天我们就举个例子说一下文件怎么上传。
这个是我我做出来的一个效果图,我们在写的时候呢需要注意几个点.
那这个是肯定不对的,怎么办呢?所以这里也是需要我们处理掉的一个点
下面就针对这几个点,我们简单的说一下,文件上传的时候需要怎么处理。
<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>
.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就诞生了,专门用于有效的传输文件。 这里基本上就可以将文件直接传递给后端了,也是没有问题的。
这个真的要说一下,这个是很头疼的一件事,为什么这么说呢,说来话长,好好的数据结构不用,非要使用一些奇葩的数据结构,不过回头想想也是一件好事,不是这个数据结构的话,也不会出现这篇文章了,下面就简单的说一下怎么回事。 我们需要的结果是这样的:
源代码是这样的:
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值都是一个变量的情况,这种数据格式不是很多,但是也是一个可以遇见的格式,所以还是需要我们注意一下的。
最近公司和个人的事情都比较多,帖子更新的着实是很慢,其实我自己也是很着急的,但是时间有限,真的是没有什么办法,确实也找不到一些好一点的值得写的文章,不想为了更新而更新,那这个平台就没有任何的意义了,所以这里还是想说一下就是虽然更新的慢,但是写的都是我自己遇到的一些真实存在的一些问题,希望可以真实的帮助到一些和我一样的人,不再同一个问题上浪费更多的时间和精力,谢谢阅读。