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组件上传闪动的解决

相关文章
|
6月前
|
前端开发 开发者 容器
|
19天前
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
4月前
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
67 0
|
4月前
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
77 0
|
8月前
|
前端开发
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
49 0
|
8月前
|
前端开发
前端项目实战捌拾叁react-admin+material ui-踩坑-List的用法之aside组件
前端项目实战捌拾叁react-admin+material ui-踩坑-List的用法之aside组件
61 0
|
8月前
|
前端开发
前端项目实战捌拾陆react-admin+material ui-踩坑-List的用法之aside组件SavedQueriesList增加筛选
前端项目实战捌拾陆react-admin+material ui-踩坑-List的用法之aside组件SavedQueriesList增加筛选
32 0
|
8月前
|
前端开发
前端项目实战捌拾柒react-admin+material ui-踩坑-List的用法之aside组件FilterLiveSearch搜索按钮
前端项目实战捌拾柒react-admin+material ui-踩坑-List的用法之aside组件FilterLiveSearch搜索按钮
48 0
|
11月前
|
前端开发
Concis组件库封装——List列表
Concis组件库封装——List列表组件封装
74 1
|
1月前
|
存储 安全 Java
java集合框架及其特点(List、Set、Queue、Map)
java集合框架及其特点(List、Set、Queue、Map)