陈田田 2019-07-17 11:34 采纳率: 40%
浏览 11848
已采纳

ElementUI 中的Upload组件绑定的file-list不起作用的问题

1、需求是这样的：

上传图片，但是图片有大小限制，如果超出限定大小，给出提示即可。

2、现有问题：

提示是可以给出的，超出大小限制后图片也没有上传到后台，但是在前台的list列表中却展现了出来。

打印了默认的fileList和绑定的值，一个是有值的，一个是没有值。

所以，是不是file-list绑定的这个值根本不起作用？

如果我不想展示不合大小的图片的名称，应该怎么做？

3、 页面代码：

图片说明

JS代码：

图片说明

页面效果和打印结果：

图片说明

  • 写回答

3条回答 默认 最新

  • 盼儿哥 2019-07-17 14:31
    关注
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
    <div id="app">
        <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="onchange"
            :file-list="fileList" 
            :auto-upload="false">
            <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>
    </div>
    <script>
        //主要原理是this.$refs.upload.uploadFiles 控制这个，
        //return data 里面的fileList  是显示时用来绑定数据的，和提交时的文件列表没关系，个人理解，提交时的文件列表是this.$refs.upload.uploadFiles
        var Main = {
            data() {
                return {
                    fileList: []
                };
            },
            methods: {
                submitUpload() {
                    this.$refs.upload.submit();
                },
                onchange(f, list) {
                    if (f.size > 3000) {
                        alert("文件太大");
                        //这里还可以判断是否有重名文件，如果有也可以用下面的方法禁止出现在文件列表中
                        this.$refs.upload.uploadFiles.splice(this.$refs.upload.uploadFiles.length - 1, 1)
                    } else {
                        // this.$refs.upload.uploadFiles.push(f)
                        //这里不用手动添加
                    }
                    console.log("this.$refs.upload", this.$refs.upload.uploadFiles)
                }
            }
        }
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 用matlab 设计一个不动点迭代法求解非线性方程组的代码
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试