elementui upload组件, 从服务端获取图片数组进行显示

最新推荐文章于 2024-05-01 00:54:42 发布

朝秦丶

最新推荐文章于 2024-05-01 00:54:42 发布

阅读量409

点赞数

分类专栏： element 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/youwe1_/article/details/132309831

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用 el-upload 的 file-list 和 auto-upload这两个属性

file-list 官方文档是一个数组里面是对象，包含name和url两个属性
auto-upload 绑定上file-list后，开启auto-upload
auto-upload会隐式上传图片，并构造适用于 el-upload组件显示图片的对象，会被 el-upload组件识别并生成显示图片的dom

{
    "code": "200",
    "data": {
        "imgs": [
            "http://dummyimage.com/200x100",
            "http://dummyimage.com/200x100",
            "http://dummyimage.com/200x100",
            "http://dummyimage.com/200x100",
            "http://dummyimage.com/200x100"
        ],
    },
    "msg": "成功"
}

<template>
    <el-upload ref="elUpload" :action="action" accept=".jpg,.png" :limit="5" :on-exceed="onExceed" :file-list="fileList" :auto-upload="true" list-				type="picture-card" multiple :on-success="successPic" :on-remove="handleRemove">
        <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>