ElementUI使用Upload组件时传递额外参数

发表于 更新于 分类于 阅读次数：
本文字数： 1.4k 阅读时长 ≈ 1 分钟
Upload组件中data属性的用法

前言

这学期写过一个项目，用到了Element中的Upload组件，项目的需求是除了上传文件到后端，还需要传递额外的参数，在这里耗了一点时间，在网上找了很多解决办法，但都不是我需要的，这里记录一下。

（吐槽一下：Element的官网说明能不能再详细一点）

说明：

  • 前端：Vue
  • 后端：Flask

这里我需要传递的参数是存储在Session中的username

正文

前端

根据官网的说明，如果要用Upload传递除文件之外的其他参数，需要使用到data属性，但也仅说明了data绑定的是一个object对象。

那就按照规则来写，首先在Vue实例对象的data中声明一个名为user的对象，在该对象中创建一个username的变量：

1
2
3
4
5
6
7
8
9
10
11
12
<script>
export default {
  data() {
    return {
      user: {
        'username': sessionStorage.getItem('username'),
      }
    }
  },
 ....
}
</script>

Upload组件的使用如下，在data属性中传递user对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div class="container">
    <el-upload
      ref="upload"
      drag
      action="http://127.0.0.1:5000/fileupload"
      :data="user"
      :auto-upload="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-button class="upload_btn" size="small" type="success" @click="submitUpload()">上传至服务器</el-button>
  </div>
</template>

后端

flask接收data传递的参数时，直接使用request.form[]语法接收对象中定义的变量，而非接收对象本身

1
2
3
4
5
6
7
# 文件上传
@file_bp.route('/fileupload', methods=['GET','POST'])
def fileUpload():
    if request.method == 'POST':
        username = request.form['username'] ##### 接收data参数
        # ....
        return "收到"

后记

草率结尾，我估计以后可能用到，为了方便查看就记录一下，也不是什么大问题。

相关文章