vue2使用elementui的上传传文件

Tfishupupup

已于 2022-04-27 16:14:15 修改

阅读量1k

点赞数

文章标签： elementui vue.js javascript 前端 vue

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

本文链接：https://blog.csdn.net/tfishupupup/article/details/124452747

版权

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

摘要由CSDN通过智能技术生成

                 <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>