首页 IT程序员内容详情

element文件上传,携带其他参数

2021-05-04 20592 小付

在OA系统的项目中,用到了文件上传,同时需要把用户信息传给后端,需要绑定data属性,data属性为对象类型,方法如下:

html:


        <template slot="imgUrlForm"

                  slot-scope="scope">

          <!-- 文件上传 -->

          <el-upload class="upload-demo"

                     action="/admin/file/upload/workflow"

                     :on-preview="handlePreview"

                     :on-remove="handleRemove"

                     :before-remove="beforeRemove"

                     multiple

                     :data="username"

                     :limit="3"

                     :on-exceed="handleExceed"

                     :file-list="fileList">

            <el-button size="small"

                       type="primary">点击上传

            </el-button>

          </el-upload>

        </template>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

js:


 data() {

    return {

      username: {}

  },

computed: {

    ...mapGetters(['permissions', 'userInfo']),

  },

mounted() {

    this.username.username = this.userInfo.username

  },

method:{

 // 上传

    handleRemove(file, fileList) {

      console.log(file, fileList)

    },

    handlePreview(file) {

      console.log(file)

    },

    handleExceed(files, fileList) {

      this.$message.warning(

        `当前限制选择 3 个文件,本次选择了 ${

          files.length

        } 个文件,共选择了 ${files.length + fileList.length} 个文件`

      )

    },

    beforeRemove(file, fileList) {

      return this.$confirm(`确定移除 ${file.name}?`)

    },

}

————————————————

版权声明:本文为CSDN博主「布偶乱跑」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_44634372/article/details/109305243


相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论