vue结合flask利用pandas上传并读取excel

背景

项目中使用到前端导入数据，之前都是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’,后台正常获取到数据