Element UI 上传组件上传多图

简介: 利用Element UI上传组件实现图片上传删除并且写入数据库

今天再写一个前端上传页面,具体思路就是用户可以上传多张图片,上传之后就存到七牛云然后写入数据库,如果用户发现某一张上传错误,可以删除,然后对于的数据库信息也要删除。


因为我是完全小白自学入门,目前学习了2个月,后端用THINKPHP写的接口,已经搞定了,前端这个上传搞了一天,终于捣鼓明白了,写下来留作纪念!


首先引入Element UI 的上传组件:

<el-form-itemlabel="上传:"><el-uploadaction="http://****/api/v1/uploadimg"//后端接受地址:headers="head":multiple="true"name="imglist"list-type="picture-card"accept="image/png, image/jpeg":limit="20":on-success="onSuccess":on-remove="onRemove"><iclass="el-icon-plus"></i></el-upload><el-dialog:visible.sync="dialogVisible"><imgwidth="50%":src="dialogImageUrl"alt=""></el-dialog></el-form-item>

这个具体流程就是,用户选择图片之后直接上传到的七牛云的存储中,然后写入数据库。onSucess 就是用来接收成功上传返回的图片信息。


Vue中Data中的数据定义如下:

export default {
    data() {
      return {
        head: {
          //这个地方是获取token,请求地址需要携带token访问
          'Authorization': this.$store.state.user
        },
        dialogImageUrl: '',
        dialogVisible: false,
        imgList: [],
      }
    }
  }

Vue中method方法的定义如何:

methods: {
      // 删除文件
      async onRemove(file, fileList) {
        // 查找与ID一致的图片索引
        let index = this.imgList.findIndex(item=>{
            return item.id == file.response.data.id
        })
        // 根据索引删除图片
        let datas = {
          id: file.response.data.id,
          user_id: file.response.data.user_id
        }
        //这就是一个请求地址
        const res = await deleteImg(datas)
        if(res.status !== 200) return this.$message.error('删除失败')
        // 根据索引珊瑚数据
        this.imgList.splice(index,1)
        this.$message.success('删除成功')
      },
      // 上传成功
      onSuccess(response){
        this.imgList.push(response.data)
      }
    }

这样就可以实现图片的上传与删除,然后对于的修改数据库里面的信息,修改之后前端也可以获取最新的图片数量。

目录
相关文章
|
26天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
140 38
|
18天前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
75 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
2月前
|
前端开发 搜索推荐 开发者
「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。
103 12
「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
|
2月前
|
搜索推荐 前端开发 开发者
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。
97 11
|
2月前
|
UED 开发者
「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制
高级动画可以显著提升用户体验,为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画,包括弹性动画、透明度渐变和旋转缩放组合动画等示例。
94 12
「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
88 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。
65 7
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
70 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
64 5
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。

热门文章

最新文章