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

相关文章
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
1238 0
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
1月前
|
小程序 前端开发
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
1289 0
Element-UI中el-upload上传组件(demo详解)
|
9月前
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
299 0
|
16天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
1月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
29 0
|
2月前
|
前端开发
UniApp 中的 u-input 属性讲解
UniApp 中的 u-input 属性讲解
65 0
|
2月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
|
9月前
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
459 0
|
5月前
|
JavaScript 前端开发
vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"
vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"
37 0