element UI 自定义上传图片功能

2019-12-02T17:59:18.052 | 浏览:124 | 文章类别: 前端

1. 项目需求

1. 向后端传输数据为base64;

2. 在前端页面 选择图片后,不上传服务器,回显在页面;

3. 任意删除;

4. 限制上传数量,限制上传图片大小

2.搬砖

1. 页面中添加element ui上传组件,并定义上传文件之前的钩子

// multiple 支持多选文件
// :before-upload="beforeAvatarUpload" 指向上传文件前的函数
// :show-file-list="false"  不显示已上传文件列表
<el-upload action="/" multiple :before-upload="beforeAvatarUpload" class="avatar-uploader" :show-file-list="false">
    <i class="el-icon-plus"></i>
</el-upload>

2. 页面中添加图片回显位置

// exampleList  存储图片的数据列表
// delimg(index)    删除数据列表的图片  index为索引
<div v-for="(img,index) in exampleList" :key="index">
    <img  :src="img" style="width: 100px;height: 100px;margin-right: 3px">
    <el-button @click="delimg(index)" size="mini">删除</el-button>
</div>

3. 判断上传的图片大小和数量,将图片转为base64格式,并回显页面。

data(){
    return{
        exampleList: [],
    }
}
methods:{
    // 选择文件后的钩子
    beforeAvatarUpload(file){
        // 限制上传图片的数量
        if(this.exampleList.length > 2){
            this.$message.error("只能上传3张");
            return false
        }else{
            // 限制上传图片的大小
            if(file.size <= 5240000){
                var self = this;
                // 图片base64化
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    var newUrl = this.result;    //图片路径
                    // 将转化为base64的图片数据,存入图片数据列表,以来完成回显和向后台传输
                    self.ruleForm.exampleList.push(newUrl);
                };
            }else{
                this.$message.warning("照片太大");
                return false
            }
        }
    },
    // 删除图片
    delimg(index){
        this.exampleList.splice(index, 1)
    }
}