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

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 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题