多文件上传

最新推荐文章于 2022-11-30 18:53:32 发布

zhangyizuishuai

最新推荐文章于 2022-11-30 18:53:32 发布

阅读量143

点赞数

分类专栏： vue组件开发 vue重修

本文链接：https://blog.csdn.net/zhangyizuishuai/article/details/111351904

版权

vue重修同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

vue组件开发

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="10" :on-exceed="handleExceed"
            :on-progress="progress"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div>{{fileList}}</div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                },{
                    name: 'food3.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }]
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log("fileList→",fileList);
                console.log("file→",file);
                this.fileList=fileList
            },
            handlePreview(file) {
                // console.log(1)
                // console.log("文件已上传时",file);
            },
            handleExceed(files, fileList) {
                    this.$message.warning(
                    `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            progress(event, file, fileList){
                console.log("上传的事件对象event",event)
                console.log("上传的文件信息file",file)
                console.log("这是上传成功后的所有文件数组fileList",fileList)
                console.log(fileList.length)
                this.fileList=fileList
            }
        },
        watch: {
            fileList: {
                handler(newName, oldName) {
                    console.log("新数据→",newName)
                },
                deep: true,//深度监听
                // immediate: true//如果加了👈属性表示刚进来就调用一次监听的函数
            }
        }

    })
</script>

</html>

zhangyizuishuai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多文件上传

<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> &lt
复制链接

扫一扫