【VUE+FLASK学习】Vue使用element-ui上传文件至服务器端

目标：将数据上传至服务器指定文件夹中，同时可以获取返回值

实现工具：element-ui —》el-upload、flask

Vue页面

核心参数（action:参数为目标地址，该处为 服务器地址/flask路由地址 ）

其余参数可以寻找element-ui文档进行对照。

      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://127.0.0.1:5000/xxx"
        :file-list="fileList"
        :auto-upload="false"
        :on-success="handleSuccess"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传服务端</el-button
        >
      </el-upload>

 FLASK代码

outinfo为获取的返回值，可根据自己的需要进行处理。

# 数据上传处理
@app.route('/xxx',methods=['POST'])
@cross_origin()  # 跨域注解
def UpGeojsonFile():
    if request.method == 'POST':
        f = request.files['file']
        filename = secure_filename(f.filename)
        # print(filename)
        # 验证文件格式
        types = ['jpg','png']
        if filename.split('.')[-1] in types:
            # 获取上传文件的服务器存储地址
            file_path = os.path.join(file_dir,'{0}'.format(filename))
            # print(file_path)
            # 文件存储
            f.save(file_path)
        outinfo = filename + '上传成功'
        return outinfo
    else:
        return 'error'

 Vue中 返回值调用函数             

handleSuccess() 已在<el-upload>中:on-success 标注 

methods:{
    handleSuccess(res, file, fileList) {
          console.log(res)
        },
}

结果：