利用elementUI完成文件上传

整体描述

利用elementUI中提供的upload组件可以完成文件上传功能。

<template>
	<div>
        <el-upload
              ref="upload"
              :action="$store.state.backend_url+'post/reference'"
              :headers="myHeaders"
              :file-list="fileList"
              :on-success="handleSuccess"
              :on-error="handleError"
              :auto-upload="false">
        </el-upload>
    </div>
</template>

<script>
export default {
  data() {
    return {
      myHeaders: {
        Authorization: 'Bearer ' + this.$cookies.get('token')
      },
      fileList: [],
    }
  }
</script>

其中action表示后端接收的地址，header可以携带自定义的请求header。

on-sucess和on-error可以分别绑定上传事件和上传失败事件。

在后端如果使用Flask进行接收的话，可以利用request中的file进行接收

data = request.files.get('file')
data.save('reference/' + data.filename)