vue2使用elementui的上传传文件

原创已于 2022-04-27 16:14:15 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript #前端 #vue

于 2022-04-27 15:46:18 首次发布

本文介绍了如何在Vue2项目中使用ElementUI的上传组件进行文件上传，并强调了通过官方文档配置上传类型、数量限制等参数。同时，提到了上传成功后的回调函数用于自定义显示上传成功的提示信息，并给出了隐藏上传文件列表的CSS代码。

                 <el-upload
                 //设置样式让他与其他按钮在同一行
                  style="display: inline-block"
                   //接口必传token，从sessionstorage拿到赋值给data里面的token再调用
                  :headers="{ token: token }"
                   //上传文件的接口地址
                  action="http://192.168.0.123:8084/file/upload"
                   //选择文件后自动上传成功之后的回调函数
                  :on-success="handleSuccess"
                   //除了上传的文件以外还必须上传的id，type,userid
                  :data="{
                    businessId: scope.row.id,
                    type: 5,
                    userId: userId,
                  }"
                >
                    //如果把el-upload标签里面放不止一个button的话，需要给确定的上传按钮添加slot="trigger",要不然点击其他按钮也会出发上传功能
                  <button class="btn6" slot="trigger"></button>
                </el-upload>

调整上传类型，数量还其他的东西看官方文档吧。https://element.eleme.cn/#/zh-CN/component/upload

然后上传成功之后的回调函数，用来自定义显示上传成功的信息yincahgn

// 文件上传成功回调
    handleSuccess(index, value) {
      console.log('12312313', index, value);
      this.$message({
        type: 'success',
        message: '上传成功'
      });
      // 重新加载数据
      this.init();
    },

隐藏上传文件的列表

// 隐藏上传文件列表

/deep/.el-upload-list {

display: none;

}