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月前
elementUI el-upload上传组件实战使用
elementUI el-upload上传组件实战使用
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3811 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
1649 0
Element-UI中el-upload上传组件(demo详解)
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
506 0
|
8月前
|
小程序 前端开发
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
|
5月前
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
70 0
Elementplus如何在input中添加icons,表单中添加icon
Elementplus如何在input中添加icons,表单中添加icon
|
8月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
424 0

热门文章

最新文章