使用Element-UI中的Upload控件上传文件 （Vue + Flask）

知识点

前端

1. 使用 :http-request 覆盖默认的上传行为，可以自定义上传的实现
2. 使用 DataForm() 携带需要上传的文件
3. 需要将http-request 的 headers中的content-type 设置为 {‘content-type’: ‘multipart/form-data’}

后端

1. 使用request.files读取文件；使用request.form, request.get_data(), request.get_json() 等都不行。

代码

HTML

<template>
    <div style="margin-top: 20px">
        <el-upload
        style="float: right"
        class="upload-demo"
        action=""
        multiple=False
        :http-request="uploadFile"
        >
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>

JS

<script>
import axios from 'axios'
export default {
	data() {
	    return {
	    };
	},
	methods: {
	    uploadSectionFile(param){
	        let fileObj = param.file
	        let form = new FormData()
	        form.append("fileToUpload", fileObj)
	        console.log(form) // output is: FormData {}; 需要使用 .get() 来读取
	        console.log(form.get("fileToUpload")) // output is exactly the fileObj
	
	        axios.post("http://127.0.0.1:5000/uploadFile", form, {
	        	headers: {'content-type': 'multipart/form-data'}
	        })
	    },
	}
}
</script>

Flask

from flask import request
api = Blueprint('api', __name__)

@api.route('/uploadFile', methods=['POST'])
def uploadFile():
    file0 = request.form.get('fileToUpload') # request.form outputs ImmutableMultiDict([]); request.form.get('fileToUpload') outputs None
    file = request.files.getlist('fileToUpload')[0] # the type of file is FileStorage
    upload_dataset = pd.read_csv(file)
    # deal with upload_dataset ....
    return

参考资料

• https://blog.csdn.net/m0_37893932/article/details/79237308
• https://gist.github.com/duhaime/e5b3fd78c014423f37428dc23caced12