element选择文件上传

文章描述:

element选择文件和发送到服务器

html

<div  id="app">

    <el-upload
            class="upload-demo"
            action="/admin/Valid/exl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :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>

script

    var _self;
    new Vue({
        el: '#app',
        data: function() {
            return {
                fileList:[]
            }
        },
        created(){
            _self = this;

        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }?`);
            }
        }
    })

 

发布时间:2023/01/18

发表评论