在vue中用elementUI构建后台管理系统遇到的有关图片的相关问题

本文探讨在Vue项目中使用ElementUI进行后台管理系统开发时,如何处理图片上传、删除操作。包括单张图片上传后关闭加号按钮的功能实现,以及多张图片上传与删除特定图片的逻辑。通过el-upload组件的属性与方法,如on-change、on-remove,结合数据绑定实现所需功能。
摘要由CSDN通过智能技术生成

一、使用elementUI构建后台管理系统如何上传一张图片和多张图片和删除一张图片和删除多张图片中的的某一张
二、上传一张图片后如何关闭"+"这个按钮:
首先,给el-upload加一个limit属性和一个class类名,limit限制上传图片的数量,class需要动态绑定类名,在data中定义一个变量uploadDisabled,默认为false,当上传一张图片的时候会触发on-change钩子函数的appChangeFile方法,该方法含有两个参数(file,fileList),fileList是在data中定义的一个用来存储图片的数组,在该方法中对存储图片的数组进行判断,如果数组长度大于等于1,说明上传了一张图片,将动态绑定类名的状态改为true,也就是让’+‘不显示。
一、使用el-upload组件--------------上传一张图片,上传一张图片后,隐藏加号(继续上传的按钮),功能只有删除,没有预览,删除使用了el-upload组件的方法:on-remove
1.代码,上传一张图片的代码
action:上传图片的地址,没有可以写’#’
list-type:上传文件的类型,设置文件列表的样式
file-list:上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}],是一个数组,需要在data中定义
multiple:是否支持多张上传
auto-upload:是否支持自动上传
on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用

        <el-form-item label="app图片">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-change="appChangeFile"
            :file-list="fileList"
            :multiple="false"
            :auto-upload="false"
            ref="prodimg"
            :class="{ disabled: uploadDisabled }"
            :limit="1"
            :on-remove="handleRemoveApp"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="tip" style=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值