element上传图片el-upload

Posted on | In

element上传图片el-upload

el-upload组件

1
2
3
4
5
6
7
8
9
<el-upload   
    action=""                                             
    list-type="picture-card"
    :on-change="uploadChange"
    :file-list="fileList"
    :limit="5"                          
    :auto-upload="false">                           
    <i class="el-icon-plus"></i>
</el-upload>

list-type:文件上传类型，如照片墙、单个上传照片
on-change:自定义上传图片
file-list:照片墙的数据
limit: 最大允许上传个数
auto-upload:el-upload 会自动上传两次，false不自动上传

获取base64

1
2
3
4
5
6
7
8
uploadChange(file,fileList) {
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = (e) =>{ 
        //reader.result获取base64
        let imgStr = reader.result
    }  
}