背景
项目中使用到前端导入数据,之前都是vue读取excel,然后批量axios分段提交,好处是可以监控上传进度,坏处是批量化axios会导致前端大量占用资源,页面卡顿,让用户体验下降,用户无法离开当前页面,甚至卡死,所以这次选择了使用直接将文件上传到后端进行操作的方式,由于前端使用vue后端使用flask,所以出现了一些问题,折腾了大半个小时,问题其实很简单,但是往往解决问题就是在一层窗户纸的事情。
操作
前端
upFile(){
let file=this.$refs.importCustomerFile.files[0]
let param = new window.FormData(); //创建form对象
param.append('file',file);
let config = {
headers:{
'Content-Type':'multipart/form-data'
}
};
this.$http({url:"/imoprtCustomer", method: 'post', data:param}).then(r=> {
that.getCustomer()
})
},
后端
@app.route('/imoprtCustomer' , methods=["GET", "POST"])
def imoprtCustomer():
file = request.files['file']
data = pd.read_excel(file)
print(nasdaq.head(10))
问题
之所以排查问题花了大半个小时主要是之前的问题排查错位置了,因为对flask不熟悉,所以以为是flask接受文件的问题,花了蛮多时间去测试requeset.files的各种方式,发现获取不到数据,后来觉得问题会不会是在formdata上,有文章写到vue中param = new FormData();是无效的必须使用param = new window.FormData();的方式,后来发现问题也不在这里,使用get(‘file’)是可以获取的数据的。后来没办法,只能使用的方式去提交,发现后台能获取到数据,才知道是post的问题,于是将axios的method: ‘post’,后台正常获取到数据