el-upload 上传多个图片或多个文件，编辑，回显，删除操作

已于 2024-07-15 09:52:12 修改
阅读量426 收藏 1
点赞数 4
文章标签： elementui 前端 javascript
于 2024-07-11 14:47:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wwf1225/article/details/140351525
版权

后端查询详情接口数据：

[
    {
        "id": 91,
        "name": "Default",
        "sort": 0,
        "fold": false,
        "deletable": false,
        "uniqueId": "machine_cabinet",
        "infoList": [
            {
                "id": 542,
                "name": "assets_number",
                "humpName": "assetsNumber",
                "label": "资产编号",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "机柜A01",
                "valueAttribute": null
            },
            {
                "id": 548,
                "name": "cabinet_model",
                "humpName": "cabinetModel",
                "label": "机柜模型",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "123",
                "valueAttribute": null
            },
            {
                "id": 549,
                "name": "cabinet_model_type",
                "humpName": "cabinetModelType",
                "label": "机柜模型类型",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "123",
                "valueAttribute": null
            },
            {
                "id": 550,
                "name": "cabinet_type",
                "humpName": "cabinetType",
                "label": "机柜属性",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "123",
                "valueAttribute": null
            },
            {
                "id": 543,
                "name": "category_id",
                "humpName": "categoryId",
                "label": "类别",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 540,
                "name": "create_time",
                "humpName": "createTime",
                "label": "创建时间",
                "dateType": 5,
                "typeValue": "date",
                "dateTypeValue": null,
                "dateTypeName": "日期",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "2024-07-05",
                "valueAttribute": null
            },
            {
                "id": 544,
                "name": "device_category_id",
                "humpName": "deviceCategoryId",
                "label": "设备类别",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 551,
                "name": "electric_switch",
                "humpName": "electricSwitch",
                "label": "市电开关",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 491,
                "name": "example",
                "humpName": "example",
                "label": "实例名",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": null,
                "max": null,
                "regex": null,
                "required": false,
                "requiredDefault": null,
                "edit": false,
                "primaryKey": false,
                "hide": false,
                "hint": null,
                "uniquely": false,
                "deletable": false,
                "groupId": 91,
                "query": true,
                "queryOrder": 0,
                "show": true,
                "showDefault": false,
                "showOrder": 0,
                "uniqueId": null,
                "orderQuery": false,
                "value": "机柜A01",
                "valueAttribute": null
            },
            {
                "id": 492,
                "name": "example_department",
                "humpName": "exampleDepartment",
                "label": "所属科室",
                "dateType": 12,
                "typeValue": "isCascade",
                "dateTypeValue": "/sso-management/department/getDepById?",
                "dateTypeName": "组织",
                "sort": 1,
                "min": null,
                "max": null,
                "regex": null,
                "required": false,
                "requiredDefault": null,
                "edit": false,
                "primaryKey": false,
                "hide": false,
                "hint": null,
                "uniquely": false,
                "deletable": false,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": [],
                "valueAttribute": [
                    {
                        "child": [
                            {
                                "child": null,
                                "key": 100000023,
                                "key2": null,
                                "name": "测试部门",
                                "parent": null,
                                "pid": 100000022,
                                "value": "测试部门"
                            }
                        ],
                        "key": 100000022,
                        "key2": null,
                        "name": "测试公司",
                        "parent": null,
                        "pid": 0,
                        "value": "测试公司"
                    },
                    {
                        "child": [
                            {
                                "child": null,
                                "key": 100000080,
                                "key2": null,
                                "name": "二级部门",
                                "parent": null,
                                "pid": 100000079,
                                "value": "二级部门"
                            }
                        ],
                        "key": 100000079,
                        "key2": null,
                        "name": "一级部门",
                        "parent": null,
                        "pid": 0,
                        "value": "一级部门"
                    },
                    {
                        "child": [
                            {
                                "child": null,
                                "key": 100000083,
                                "key2": null,
                                "name": "a科室",
                                "parent": null,
                                "pid": 100000082,
                                "value": "a科室"
                            },
                            {
                                "child": null,
                                "key": 100000085,
                                "key2": null,
                                "name": "b科室",
                                "parent": null,
                                "pid": 100000082,
                                "value": "b科室"
                            },
                            {
                                "child": null,
                                "key": 100000123,
                                "key2": null,
                                "name": "c部门",
                                "parent": null,
                                "pid": 100000082,
                                "value": "c部门"
                            }
                        ],
                        "key": 100000082,
                        "key2": null,
                        "name": "科技科",
                        "parent": null,
                        "pid": 0,
                        "value": "科技科"
                    },
                    {
                        "child": null,
                        "key": 100000091,
                        "key2": null,
                        "name": "测试1",
                        "parent": null,
                        "pid": 0,
                        "value": "测试1"
                    },
                    {
                        "child": [
                            {
                                "child": [
                                    {
                                        "child": null,
                                        "key": 100000122,
                                        "key2": null,
                                        "name": "测试部门11111111",
                                        "parent": null,
                                        "pid": 100000120,
                                        "value": "测试部门11111111"
                                    }
                                ],
                                "key": 100000120,
                                "key2": null,
                                "name": "测试部门111",
                                "parent": null,
                                "pid": 100000106,
                                "value": "测试部门111"
                            }
                        ],
                        "key": 100000106,
                        "key2": null,
                        "name": "测试部门1",
                        "parent": null,
                        "pid": 0,
                        "value": "测试部门1"
                    },
                    {
                        "child": null,
                        "key": 100000107,
                        "key2": null,
                        "name": "测试部门2",
                        "parent": null,
                        "pid": 0,
                        "value": "测试部门2"
                    },
                    {
                        "child": null,
                        "key": 100000108,
                        "key2": null,
                        "name": "测试部门3",
                        "parent": null,
                        "pid": 0,
                        "value": "测试部门3"
                    },
                    {
                        "child": null,
                        "key": 100000109,
                        "key2": null,
                        "name": "测试部门4",
                        "parent": null,
                        "pid": 0,
                        "value": "测试部门4"
                    },
                    {
                        "child": null,
                        "key": 100000110,
                        "key2": null,
                        "name": "测试部门5",
                        "parent": null,
                        "pid": 0,
                        "value": "测试部门5"
                    }
                ]
            },
            {
                "id": 493,
                "name": "example_state",
                "humpName": "exampleState",
                "label": "实例状态",
                "dateType": 11,
                "typeValue": "select",
                "dateTypeValue": "/cmdb/dict/query?args=example_state&",
                "dateTypeName": "列表",
                "sort": 1,
                "min": null,
                "max": null,
                "regex": null,
                "required": false,
                "requiredDefault": null,
                "edit": false,
                "primaryKey": false,
                "hide": false,
                "hint": null,
                "uniquely": false,
                "deletable": false,
                "groupId": 91,
                "query": true,
                "queryOrder": 0,
                "show": true,
                "showDefault": false,
                "showOrder": 0,
                "uniqueId": null,
                "orderQuery": false,
                "value": [
                    "1"
                ],
                "valueAttribute": [
                    {
                        "id": 33,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "1",
                        "value": "使用中",
                        "sort": 1,
                        "enable": true,
                        "defaulted": true,
                        "remark": "系统生成"
                    },
                    {
                        "id": 34,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "2",
                        "value": "维护中",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    },
                    {
                        "id": 35,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "3",
                        "value": "闲置",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    },
                    {
                        "id": 36,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "4",
                        "value": "备用",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    },
                    {
                        "id": 37,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "5",
                        "value": "报废",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    },
                    {
                        "id": 38,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "6",
                        "value": "已出厂",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    },
                    {
                        "id": 39,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "7",
                        "value": "送修",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    },
                    {
                        "id": 40,
                        "createTime": "2024-05-24 14:17:00",
                        "groups": "example_state",
                        "key": "8",
                        "value": "损坏待修",
                        "sort": 1,
                        "enable": true,
                        "defaulted": false,
                        "remark": "系统生成"
                    }
                ]
            },
            {
                "id": 558,
                "name": "h",
                "humpName": "h",
                "label": "高",
                "dateType": 3,
                "typeValue": "float",
                "dateTypeValue": null,
                "dateTypeName": "浮点",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 490,
                "name": "id",
                "humpName": "id",
                "label": "主键ID",
                "dateType": 0,
                "typeValue": "number",
                "dateTypeValue": null,
                "dateTypeName": null,
                "sort": 1,
                "min": null,
                "max": null,
                "regex": null,
                "required": false,
                "requiredDefault": null,
                "edit": false,
                "primaryKey": true,
                "hide": true,
                "hint": "隐藏主键ID",
                "uniquely": false,
                "deletable": false,
                "groupId": 91,
                "query": false,
                "queryOrder": 1,
                "show": false,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": 1,
                "valueAttribute": null
            },
            {
                "id": 556,
                "name": "l",
                "humpName": "l",
                "label": "长",
                "dateType": 3,
                "typeValue": "float",
                "dateTypeValue": null,
                "dateTypeName": "浮点",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 559,
                "name": "location",
                "humpName": "location",
                "label": "地理位置",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 560,
                "name": "model",
                "humpName": "model",
                "label": "规格型号",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 561,
                "name": "name",
                "humpName": "name",
                "label": "机柜名称",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "机柜A01",
                "valueAttribute": null
            },
            {
                "id": 562,
                "name": "power_capacity",
                "humpName": "powerCapacity",
                "label": "电力容量",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 545,
                "name": "qr_code",
                "humpName": "qrCode",
                "label": "二维码",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 546,
                "name": "resource_category_id",
                "humpName": "resourceCategoryId",
                "label": "资源类别",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 563,
                "name": "room",
                "humpName": "room",
                "label": "所属机房",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "1",
                "valueAttribute": null
            },
            {
                "id": 564,
                "name": "room_number",
                "humpName": "roomNumber",
                "label": "机房内部编号",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 547,
                "name": "style_type",
                "humpName": "styleType",
                "label": "标签样式",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 552,
                "name": "toward",
                "humpName": "toward",
                "label": "朝向",
                "dateType": 2,
                "typeValue": "number",
                "dateTypeValue": null,
                "dateTypeName": "数字",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 565,
                "name": "unumber",
                "humpName": "unumber",
                "label": "总U数",
                "dateType": 2,
                "typeValue": "number",
                "dateTypeValue": null,
                "dateTypeName": "数字",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "42",
                "valueAttribute": null
            },
            {
                "id": 541,
                "name": "update_time",
                "humpName": "updateTime",
                "label": "更新时间",
                "dateType": 5,
                "typeValue": "date",
                "dateTypeValue": null,
                "dateTypeName": "日期",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 566,
                "name": "ups_switch",
                "humpName": "upsSwitch",
                "label": "UPS开关",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 567,
                "name": "vendor",
                "humpName": "vendor",
                "label": "机柜厂商",
                "dateType": 1,
                "typeValue": "input",
                "dateTypeValue": null,
                "dateTypeName": "短字符",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 557,
                "name": "w",
                "humpName": "w",
                "label": "宽",
                "dateType": 3,
                "typeValue": "float",
                "dateTypeValue": null,
                "dateTypeName": "浮点",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 553,
                "name": "x",
                "humpName": "x",
                "label": "横轴",
                "dateType": 3,
                "typeValue": "float",
                "dateTypeValue": null,
                "dateTypeName": "浮点",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 554,
                "name": "y",
                "humpName": "y",
                "label": "纵轴",
                "dateType": 3,
                "typeValue": "float",
                "dateTypeValue": null,
                "dateTypeName": "浮点",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 555,
                "name": "z",
                "humpName": "z",
                "label": "竖轴",
                "dateType": 3,
                "typeValue": "float",
                "dateTypeValue": null,
                "dateTypeName": "浮点",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 91,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            }
        ]
    },
    {
        "id": 95,
        "name": "文件",
        "sort": 1,
        "fold": false,
        "deletable": true,
        "uniqueId": "machine_cabinet",
        "infoList": [
            {
                "id": 673,
                "name": "file",
                "humpName": "file",
                "label": "文件",
                "dateType": 14,
                "typeValue": "file",
                "dateTypeValue": null,
                "dateTypeName": "文件",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 95,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": null,
                "valueAttribute": null
            },
            {
                "id": 671,
                "name": "img",
                "humpName": "img",
                "label": "图片",
                "dateType": 13,
                "typeValue": "image",
                "dateTypeValue": null,
                "dateTypeName": "图片",
                "sort": 1,
                "min": "",
                "max": "",
                "regex": null,
                "required": false,
                "requiredDefault": "",
                "edit": true,
                "primaryKey": false,
                "hide": false,
                "hint": "",
                "uniquely": null,
                "deletable": true,
                "groupId": 95,
                "query": true,
                "queryOrder": 1,
                "show": true,
                "showDefault": false,
                "showOrder": 1,
                "uniqueId": null,
                "orderQuery": false,
                "value": "[{\"name\":\"4\",\"url\":\"cmdb/20240711/11432589000952.png\"},{\"name\":\"1\",\"url\":\"cmdb/20240711/21296220514619.png\"},{\"name\":\"2\",\"url\":\"cmdb/20240711/4042956264619.png\"}]",
                "valueAttribute": null
            }
        ]
    }
]

vue组件代码：（代码有点乱，只看上传有关的就行）

<template>
  <!-- 资源实例详情-- 属性页面 -->
  <div class="property">
    <el-form
      :inline="true"
      :model="formInline"
      label-width="130px"
      label-position="right"
      style="padding-left: 80px"
    >
      <div v-for="item in detailList" :key="item.id">
        <el-row
          ><div class="subName">{{ item.name }}</div></el-row
        >
        <div class="sunNameSpace">
          <el-form-item
            style="width: 40%"
            :label="v.label"
            v-for="(v, i) in item.infoList"
            v-if="v.name !== 'id'"
            :key="v.id"
          >
            <div @mouseleave="editModeButton = false">
              <!-- 非编辑状态 -->
              <span v-if="!editMode" @mouseenter="doEnter(v)">
                <span
                  v-if="
                    v.typeValue == 'select' &&
                    v[`valueAttribute${i}`] &&
                    v[`valueAttribute${i}`].length > 0
                  "
                >
                  <el-select v-model="v.value" clearable disabled>
                    <el-option
                      v-for="w in v[`valueAttribute${i}`]"
                      :key="w.key"
                      :label="w.value"
                      :value="w.key"
                    >
                    </el-option>
                  </el-select>
                </span>
                <span
                  v-else-if="
                    v.typeValue == 'isCascade' &&
                    v[`valueAttribute${i}`] &&
                    v[`valueAttribute${i}`].length > 0
                  "
                >
                  <el-cascader
                    v-model="v.value"
                    :options="v[`valueAttribute${i}`]"
                    :props="propsCascader"
                    disabled
                  ></el-cascader>
                </span>
                <span v-else-if="v.typeValue == 'bool'">
                  <el-switch v-model="v.value" disabled></el-switch>
                </span>
                <span v-else-if="v.typeValue == 'image'" style="display: flex">
                  <div
                    v-for="(item, index) in getImgListBase(v.value)"
                    :key="index"
                  >
                    <el-image
                      style="width: 120px; height: 120px; margin-right: 10px"
                      :src="item.url"
                      :preview-src-list="getImgListBaseList(v.value)"
                    >
                      <span>{{ item.name }}</span>
                    </el-image>
                  </div>
                </span>
                <span v-else-if="v.typeValue == 'file'">
                  <el-upload
                    disabled
                    action
                    :file-list="getImgListBase(v.value)"
                  >
                  </el-upload>
                </span>
                <span v-else>{{ v.value }}</span>
              </span>
              <!-- 鼠标移入显示复制右边icon -->
              <!-- <span v-if="editModeButton && currnetField == v.id">
                <i
                  class="el-icon-document-copy colorStyle"
                  v-clipboard:copy="v.value"
                  v-clipboard:success="clipboardSuccess"
                ></i
              ></span> -->
              <!-- 编辑状态 -->
              <div v-if="editMode">
                <el-input
                  v-if="v.typeValue == 'input' || v.typeValue == 'textarea'"
                  v-model="v.value"
                  @change="changeInput(v)"
                  @blur="getDataListS(v)"
                ></el-input>
                <el-input
                  v-else-if="v.typeValue == 'number' || v.typeValue == 'float'"
                  type="number"
                  v-model="v.value"
                  @change="changeInput(v)"
                ></el-input>
                <el-date-picker
                  style="width: 202px"
                  v-else-if="v.typeValue == 'date'"
                  value-format="yyyy-MM-dd"
                  type="date"
                  v-model="v.value"
                  @change="changeInput(v)"
                ></el-date-picker>
                <el-date-picker
                  style="width: 202px"
                  v-else-if="v.typeValue == 'time'"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  v-model="v.value"
                  @change="changeInput(v)"
                ></el-date-picker>
                <el-switch
                  v-else-if="v.typeValue == 'bool'"
                  v-model="v.value"
                  @change="changeInput(v)"
                ></el-switch>
                <span
                  style="display: flex"
                  v-else-if="v.typeValue == 'image'"
                  @click="doChangeImg(v)"
                >
                  <el-upload
                    ref="upload"
                    action
                    multiple
                    list-type="picture-card"
                    :file-list="v[`fileList${i}`]"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemoveImg"
                    :http-request="uploadFilesImg"
                    :on-change="changeFileImg"
                    :headers="headers"
                    :on-success="handleSucess"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </span>
                <span
                  v-else-if="v.typeValue == 'file'"
                  @click="doOperate(v, i)"
                >
                  <el-upload
                    ref="upload"
                    action
                    multiple
                    :file-list="v[`fileList${i}`]"
                    :on-remove="handleRemove"
                    :http-request="uploadFiles"
                    :on-change="changeFile"
                    :headers="headers"
                  >
                    <el-button
                      size="small"
                      type="primary"
                      @click="doChange(v, i)"
                      >点击上传</el-button
                    >
                  </el-upload>
                </span>
                <el-select
                  style="width: 202px"
                  v-else-if="
                    v.typeValue == 'select' &&
                    v[`valueAttribute${i}`] &&
                    v[`valueAttribute${i}`].length > 0
                  "
                  v-model="v.value"
                  clearable
                  @change="changeInput(v)"
                >
                  <el-option
                    v-for="w in v[`valueAttribute${i}`]"
                    :key="w.key"
                    :label="w.value"
                    :value="w.key"
                  >
                  </el-option>
                </el-select>
                <el-cascader
                  style="width: 202px"
                  v-else-if="
                    v.typeValue == 'isCascade' &&
                    v[`valueAttribute${i}`] &&
                    v[`valueAttribute${i}`].length > 0
                  "
                  v-model="v.value"
                  :options="v[`valueAttribute${i}`]"
                  :props="propsCascader"
                  @change="changeInput(v)"
                ></el-cascader>
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div style="float: right; margin-right: 50px">
      <el-button
        v-if="!editMode"
        type="primary"
        size="mini"
        @click="
          editMode = true;
          editModeButton = false;
        "
        >编辑</el-button
      >
      <el-button
        v-if="editMode"
        type="primary"
        size="mini"
        @click="handleSubmit"
        >保存</el-button
      >
      <el-button v-if="editMode" size="mini" @click="doCancel">取消</el-button>
    </div>
  </div>
</template>
  
  <script>
import { mapGetters } from "vuex";
import {
  details,
  updateResource,
  querySelectR,
  getAddress,
  upload,
} from "@/api/cmdb/model";
import UploadFile from "./UploadFile.vue";
export default {
  components: { UploadFile },
  computed: {
    ...mapGetters(["getActiveModel", "getResourceId"]),
  },
  data() {
    return {
      baseUrl:
        process.env.NODE_ENV === "development"
          ? "http://10.7.40.178:10180/file/"
          : window.location.protocol + "//" + window.location.host + "/file/",
      formInline: {},
      editModeButton: false,
      editMode: false,
      currnetField: "",
      detailList: [],
      options: [],
      propsCascader: {
        value: "key",
        label: "value",
        children: "child",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [], // 上传文件列表
      fileListImg: [], // 上传文件列表
      currnetFieldName: "",
      currnetFieldNameImg: "",
      imgList: "1.png,2.png",
      showIndex: 0,
      headers: { "Content-Type": "multipart/form-data" }, //必须加这个
      currentFileList: [],
      currentImgList: [],
      dataImgList: [],
      dataFileList: [],
    };
  },
  mounted() {
    this.getList();
    // this.getSelect();
  },
  methods: {
    getReplaceAll(str, find, replace) {
      return str.replace(new RegExp(find, "g"), replace);
    },
    getImgListBase(data) {
      let arr = [];
      // eval 去掉数组外层的引号，转成数组
      if (data) {
        arr = eval(data);
        arr.forEach((v) => {
          if (!v.url.includes("http")) {
            v.url = this.baseUrl + v.url;
          }
        });
      }
      return arr;
    },
    getImgListBaseList(data) {
      let list = [];
      let arr = [];
      // eval 去掉数组外层的引号，转成数组
      if (data) {
        arr = eval(data);
        arr.forEach((v) => {
          if (!v.url.includes("http")) {
            v.url = this.baseUrl + v.url;
          }
          list.push(v.url);
        });
      }
      return list;
    },
    getImgList(data) {
      let arr = [];
      // eval 去掉数组外层的引号，转成数组
      if (data) {
        arr = eval(data);
        arr.forEach((v) => {
          v.url = v.url;
        });
      }
      return arr;
    },
    getDataListS(v) {
      if (v.regex) {
        /*这个正则表示的是输入框前后不得有空格*/
        let re = v.regex.replace("\n", "");
        // 将后端返回的正则字符串转为正则对象
        let reg = new Function("return " + re)();
        if (reg.test(v.value) == true) {
          /*所需要写的事件*/
        } else {
          /*空格的时候的提示语*/
          this.$message.error(`${v.label}正则校验不通过，请重新输入`);
        }
      }
    },

    /** 复制代码成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
    doEnter(v) {
      this.editModeButton = true;
      this.currnetField = v.id;
    },
    // 获取下拉字段的下拉值
    getSelect() {
      // querySelectR({ args: "default" }).then((res) => {
      //   if (res.code == 0) {
      //     this.options = res.data;
      //   }
      // });
    },
    // 编辑-保存
    handleSubmit() {
      // console.log("编辑数据:", this.formInline);
      let params = {
        uniqueId: this.getActiveModel.uniqueId,
        id: this.getResourceId,
        args: this.formInline,
      };
      updateResource(params)
        .then((res) => {
          if (res.code == 0) {
            this.editMode = false;
            this.$message.success(res.desc);
            this.getList();
          } else {
            this.editMode = false;
            res.desc && this.$message.error(res.desc);
          }
        })
        .catch((err) => {
          this.editMode = false;
          err.desc && this.$message.error(err.desc);
        });
    },
    changeInput(v) {
      if (v.typeValue == "bool") {
        if (v.value) {
          this.formInline[v.name] = 1;
        } else {
          this.formInline[v.name] = 0;
        }
      } else if (v.typeValue == "isCascade") {
        this.formInline[v.name] = v.value.join();
      } else {
        this.formInline[v.name] = v.value;
      }
    },

    getList() {
      let params = {
        uniqueId: this.getActiveModel.uniqueId,
        id: this.getResourceId,
      };
      details(params)
        .then((res) => {
          if (res.code == 0) {
            this.detailList = res.data;
            this.detailList.forEach((v1) => {
              v1.infoList.forEach((v2, i2) => {
                if (v2.typeValue == "isCascade" || v2.typeValue == "select") {
                  getAddress(
                    process.env.NODE_ENV === "development"
                      ? "http://10.7.40.178:10176" + v2.dateTypeValue
                      : window.location.protocol +
                          "//" +
                          window.location.host +
                          v2.dateTypeValue,
                    {}
                  ).then((res2) => {
                    // v2[`valueAttribute${i2}`] = res2;
                    this.$set(v2, `valueAttribute${i2}`, res2); // 双向绑定，回显问题
                  });
                  if (v2.typeValue == "isCascade") {
                    v2.value = v2.value.map(Number); // 级联下拉转换成Number数组，编辑回显绑定
                  } else {
                    v2.value = v2.value.join();
                  }
                }
                // 图片文件格式数据处理
                if (v2.typeValue == "image" || v2.typeValue == "file") {
                  this.$set(v2, `fileList${i2}`, this.getImgListBase(v2.value));
                }
              });
            });
          } else {
            res.desc && this.$message.error(res.desc);
          }
        })
        .catch((err) => {
          err.desc && this.$message.error(err.desc);
        });
    },
    doCancel() {
      this.editMode = false;
      this.getList();
    },
    handleSucess(response, file, fileList) {
      this.dataImgList = fileList;
    },
    handleRemoveImg(file, fileList) {
      this.dataImgList = fileList;
      setTimeout(() => {
        if (this.currnetFieldNameImg) {
          this.formInline[this.currnetFieldNameImg] = fileList;
        }
      }, 0);
    },
    handleRemove(file, fileList) {
      this.currentFileList = fileList;
      // 延时异步先拿到this.currnetFieldName
      setTimeout(() => {
        console.log("删除文件", this.currnetFieldName, file, fileList);
        if (this.currnetFieldName) {
          this.formInline[this.currnetFieldName] = fileList;
        }
      }, 0);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //通过onchanne触发方法获得文件列表
    changeFileImg(file, fileList) {
      this.dataImgList = fileList;
    },
    changeFile(file, fileList) {
      this.currentFileList = fileList;
      console.log("change", fileList);
    },
    uploadFilesImg(file) {
      const _file = file.file;
      var formData = new FormData();
      // formData.append("files", _file);
      formData.append("args", "cmdb");
      this.dataImgList.forEach((v) => {
        formData.append("files", v.raw);
      });
      upload(formData)
        .then((res) => {
          if (res.code == 0) {
            res.data.forEach((v) => {
              v.url = this.baseUrl + v.url;
            });
            let arr = [];
            this.dataImgList = this.dataImgList.concat(res.data);
            this.dataImgList.forEach((v) => {
              if (v.raw) {
              } else {
                arr.push(v);
              }
            });
            if (this.currnetFieldNameImg) {
              this.formInline[this.currnetFieldNameImg] = arr;
            }
            this.$message.success("上传成功");
          } else {
            res.desc && this.$message.error(res.desc);
          }
        })
        .catch((err) => {
          err.desc && this.$message.error(err.desc);
        });
    },
    uploadFiles(file) {
      const _file = file.file;
      var formData = new FormData();
      // formData.append("files", _file);
      formData.append("args", "cmdb");
      this.currentFileList.forEach((v) => {
        formData.append("files", v.raw);
      });
      upload(formData)
        .then((res) => {
          if (res.code == 0) {
            let arr = [];
            this.currentFileList = this.currentFileList.concat(res.data);
            this.currentFileList.forEach((v) => {
              if (v.raw) {
              } else {
                arr.push(v);
              }
            });
            if (this.currnetFieldName) {
              this.formInline[this.currnetFieldName] = arr;
            }
            this.$message.success("上传成功");
          } else {
            res.desc && this.$message.error(res.desc);
          }
        })
        .catch((err) => {
          err.desc && this.$message.error(err.desc);
        });
    },
    // 删除图片后获取name
    doChangeImg(v) {
      this.currnetFieldNameImg = v.name;
    },
    doChange(v, i) {
      this.currnetFieldName = v.name;
    },
    // 删除文件后获取name
    doOperate(v, i) {
      console.log("文件==", v, i);
      this.showIndex = i;
      this.currnetFieldName = v.name;
    },
  },
};
</script>

<style lang="scss" scoped>
.property {
  margin-top: 20px;
  .subName {
    font-size: 16px;
    padding-left: 10px;
    border-left: 3px solid #ccc;
  }
  .colorStyle {
    color: #409eff;
    cursor: pointer;
    margin-left: 5px;
  }
}
</style>

wwf1225
关注
el-upload上传图片成功，详情页回显base64格式的图片
qq_37635012的博客
05-24 3692
上传图片，并传给后端图片格式是base64。
el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端
qq_37635012的博客
01-04 1612
最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端需要在用户点击保存的时候，前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来，如下图，用户在名称输入框输入“武汉”两个字后调接口获取到的数据如下有“武汉市花木有限公司”、“武汉大学”等，当用户选中“武汉大学”后会将接口返回的信息回显
element ui多图片上传加修改回显
12-31
vue-element-admin加入多图片上传并回显 vue使用element ui多图片上传加修改回显示例使用模态框
el-upload照片墙自定义上传多张图片（手动一次性上传多张图片）包含图片回显，删除
最新发布
请叫我欧皇！的博客
07-23 1625
需求：el-upload照片墙自定义上传多张图片（手动一次性上传多张图片）包含图片回显，删除，预览，在网上看了很多，都没有说怎么把数据转为file格式的，找了很久最终实现， 难点：怎么把接口获取到的图片转为file格式，如果不是file格式的话，那么后端无法识别，并且还要携带额外的参数
Vue el-upload 组件多张图片上传并回显（无需添加样式）以及正确使用方式
tpl9236 的博客
02-23 3855
Vue el-upload 组件多张图片上传并回显不需要添加样式以及正确使用方式
el-upload 组件上传文件(查询,上传,删除,下载功能)
m0_61601708的博客
06-22 1280
/ this.$global.fileUrl是自己定义的全局服务器地址,直接写服务器地址也行。// 文件上传的头,带token（重要，不然传输大文件会断掉）ruoyi有封装好的,一般在created中自己先获取。// 文件上传成功（上传接口写这，回显的数据处理）// 文件上传前（判断文件类型，大小）// 文件移除时候（删除文件接口写这）// element-ui自带的样式。// 点击文件时候（文件点击下载）// 页面文件回显的list。// 上传的服务器地址。
【vue 项目】el-upload 上传文件以及回显照片和下载文件
热门推荐
Aohanzzz的博客
03-07 2万+
el-upload上传文件以及回显照片和下载文件
el-upload使用http-request实现图片上传，回显，放大效果
qq_44185357的博客
08-18 4278
在项目开发中，为了实现上传文件的功能，我们需要用到el-upload这个组件，为了实现回显放大效果，就要用到el-image这个组件了。官方文档中介绍了上传的两种方法，一个是使用action，其参数必须要上传的地址；另一个是http-request，该方法覆盖默认的上传行为，可以自定义上传的实现。下面阐述如何实现图片上传，回显，放大效果。通过以上介绍我们已经初步了解了el-upload的用法，下面我们来看图片上传回显放大的实现过程。上传图片有以下这些几种方式，开发者可以根据项目实际情况进行选择。
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
Aotman_的博客
07-16 2500
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
11-21
- 回显的图片可以在上传列表中继续编辑，如添加新图片或删除已上传图片。 6. **上传状态判断**： - 为了避免重复上传，已上传的图片需要被识别和过滤。可以通过判断图片 URL 是否包含 "blob" 字符串来确认是否已...
element ui 多张图片上传、回显、删除
m0_70023962的博客
07-25 3246
提交前截取字符串获取图片信息到后台请求，各位大佬挑选自己用的到的部分复制修改一下就行。
el-upload组件上传单/多张图片
m0_61601708的博客
04-04 6370
show-file-list="false" 不允许多张图片显示，只一张。list-type="picture-card" 照片墙显示。list-type="picture-card" 照片墙格式。:limit="9" 限制上传的图片张数为9。action 图片上传后台请求地址（必填）before-upload 图片上传前。on-success 图片上传成功时候。1.创建Global.vue的文件。on-remove 图片删除时候。2.main.js文件中引入。，v-if控制是新增还是修改。
element-plus 之 el-upload上传多图并预览
weixin_43136717的博客
10-27 6026
vue3、element-plus、el-upload
封装 el-upload，实现可上传图片、预览图片、编辑图片、删除图片功能
qq_41775006的博客
02-01 1919
父组件 template <el-card> <div>上传图片子组件</div> <el-form label-width="100px"> <el-form-item label="图片："> <uploadImg :limit="5" :fileList="fileList" @submitImg="getImgLis
Vue+el-upload批量上传附件，及删除操作
小破孩的博客
12-25 1182
Vue+el-upload批量上传附件，及删除操作
基于 el-upload 实现添加、删除、批量上传 csv 文件
铁five的博客
05-12 911
判断所有传输文件是否符合要求格式将多个数据合并为一个 FormData使用 axios 将文件传输传输成功后清空文件列表，否则弹出消息窗首先是在文件传输前判断要求，使用进行判断类型和文件大小是否符合if (!isCsv) {ElMessage({ message: "只能上传csv文件", type: "warning" })if (!isLt2M) {message: `上传文件大小不能超过 ${maxFileSize}MB!`,})接着在自定义的上传函数。
使用el-upload组件实现递归多文件上传
程序员林北北的博客
02-16 1万+
使用el-upload组件实现递归多文件上传
vue3如何二次封装el-upload组件进行图片上传及删除
Jolly_zhang的博客
03-25 1476
vue3如何二次封装el-upload组件并进行图片上传和删除
ElementUI实现多图片上传及回显功能
RE_Z002的博客
04-19 4557
ElementUI实现多图片上传及回显功能
二次封装el-upload 并回显多个图片
05-24
要实现二次封装el-upload并回显多个图片，你可以按照以下步骤进行： 1. 在el-upload组件的基础上封装一个新组件，并命名为MultiUpload。 2. 在MultiUpload组件中，添加一个data属性，用于存储已上传的图片路径数组。 3. 在el-upload组件中，添加一个success事件处理函数。在该函数中，将上传成功的图片路径添加到data属性中保存。 4. 在MultiUpload组件中，添加一个template模板。该模板中，可以使用v-for指令遍历data属性中的图片路径数组，并将每个图片路径渲染到页面上。 下面是一个简单的MultiUpload组件示例代码： ``` <template> <el-upload action="/upload" :on-success="handleSuccess" multiple :show-file-list="false"> <el-button type="primary">点击上传</el-button> </el-upload> <div v-for="url in imageUrlList" :key="url"> <img :src="url" alt="uploaded image" style="max-width: 100%;"> </div> </template> <script> export default { data() { return { imageUrlList: [] } }, methods: { handleSuccess(response, file, fileList) { this.imageUrlList.push(response.url) } } } </script> ``` 在这个示例代码中，MultiUpload组件使用了element-ui中的el-upload组件，并通过v-for指令遍历了imageUrlList数组中的图片路径，并将每个图片路径渲染到页面上。在handleSuccess方法中，将上传成功的图片路径添加到imageUrlList数组中保存。 使用这个二次封装的MultiUpload组件时，只需要像使用el-upload组件一样使用即可。例如： ``` <multi-upload></multi-upload> ``` 这里没有传递任何属性或事件处理函数，因为MultiUpload组件中已经处理了所有必要的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值