elementUI:Upload组件list-type: picture-card上传闪动

简介: elementUI:Upload组件list-type: picture-card上传闪动

直接push file对象 可以解决

多图上传示例

<el-upload
        action="action"
        list-type="picture-card"
        name="image"
        :file-list="files"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :http-request="uploadFile"
      >
        <i class="el-icon-plus"></i>
</el-upload>
props: {
    // 引用传递数组 { name, url }
    files: { type: Array, default: null },
 },
methods: {
     // 自定义实现文件上传
     async uploadFile(params) {
      let form = new FormData();
      form.append('image', params.file);
      const res = await this.$Http.commonUpload(form);
      return res;
    },
  // 处理添加
  handleSuccess(response, file, fileList) {
     // 设置url
     file.url = response.data.url;
     this.files.push(file);
  },
  // 移除
  handleRemove(file, fileList) {
    this.files.splice(0, this.files.length, ...fileList);
  }
} 

参考

饿了么UI组件库中,Upload组件上传闪动的解决

相关文章
|
8月前
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
465 0
|
前端开发 开发者 容器
|
1天前
|
前端开发 JavaScript UED
React 拖拽排序组件 Draggable List
在现代Web应用中,拖拽排序功能显著提升用户体验。使用React结合`react-dnd`库,可以轻松创建高效且易于维护的拖拽排序组件。通过简单的拖拽操作,用户能直观调整列表项顺序,适用于任务管理、看板工具等场景。实现步骤包括项目初始化、安装依赖、创建基础组件、添加拖拽功能及管理状态和事件。常见问题如拖拽效果不流畅、顺序未更新等可通过性能优化、正确处理索引交换等方式解决。移动端支持也需考虑,确保跨平台的良好体验。
41 25
|
2月前
|
大数据 UED
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
List 和 Grid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。
111 9
|
2月前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
241 2
|
4月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
53 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
143 0
|
8月前
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
JSON JavaScript 数据格式
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
84 1
|
8月前
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
377 0