首页 > 其他分享 >elementUI使用el-uplaod上传多个图片并删除部分图片

elementUI使用el-uplaod上传多个图片并删除部分图片

时间:2023-08-25 16:48:14浏览次数:28  
标签:el form elementUI url index list item file 图片

前端界面:

          <el-form-item label="商品轮播图" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]"
                        prop="images">
            <el-upload
                ref="upload"
                :action=webSite
                class="upload-demo"
                drag
                :limit="5"
                :file-list="form.file_list"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :headers="uploadHeaders"
                :show-file-list="true"
                multiple
                style="float: left">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过5M</div>
            </el-upload>
          </el-form-item>

  其中,主要是on-success 和 on-remove需要特殊处理, form.file_list 初始化为 空列表[]

    handleSuccess(response, file, fileList) {
      this.$message.success('上传成功!')
      this.form.image = response.url;
      if (fileList.every(item => item.status === 'success')) {
        fileList.map(item => {
          /** 这时只需要push进带有response的数据就好 */
          if (item.response) {
            this.form.file_list.push({
              name: item.response.file_name,
              url: item.response.url
            })
          }
        })
      }
      console.log(this.form.file_list)
    },

  

    handleRemove(file) {
      // 通过url找到index并去除列表
      const indexs = this.form.file_list.map((item, index) => index).filter(index => this.form.file_list[index].url === file.url);
      for (let index of indexs) {
        this.form.file_list.splice(index, 1);
      }
    },

  

后端接收 form内容,request.data,其中file_list的内容为:

'file_list': [{'name': '桃花.png', 'url': 'save_dir/13786f5bfc734da1bb1d31eecd4c453d.png', 'uid': 1692951058963, 'status': 'success'}, {'name': '1-小鸡1.png', 'url': 'save_dir/8d868dddaa7e4ffdad5ae0f077c770a9.png', 'uid': 1692951058964, 'status': 'success'}]

  

标签:el,form,elementUI,url,index,list,item,file,图片
From: https://www.cnblogs.com/lytcreate/p/17657316.html

相关文章

  • CEF4Delphi(DELPHI Google Chrome 浏览器封装) 折腾 (2)--打开一个网页
      打开网页的,折腾了好久,试运行DEMO,就行,把DELPHI的代码抄过来,就是不行,然后把自己弄的控件名称搞的与DEMO一样,属性全对一样了,还是不行,郁闷很久后,才发现工程文件里面还要加代码。 我的工程名为:OpenChrome 选中工程文件后按CTRL+V,然后做以下修改:下面红色的代码是CEF4中需要......
  • element-ui(Form 表单)
    在Form组件中,每一个表单域由一个Form-Item组件构成,表单域中可以放置各种类型的表单控件,包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker<el-formref="form":model="form"label-width="80px"><el-form-itemlabel="活动名称">......
  • CEF4Delphi(DELPHI Google Chrome 浏览器封装) 折腾 (1)--安装
    1、下载:https://github.com/salvadordf/CEF4Delphi/tree/master2、安装包:CEF4Delphi-master\packages目录中,如果不行,全部包都编译一下。3、下载运行环境:地址到 https://github.com/salvadordf/CEF4Delphi/tree/master中能查的到 Windows32bitsWindows64bitsLinux......
  • element-ui(table表格)
    当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。<el-table:data="tableData"style="width:100%"> <el-table-columnprop="date"label="日期"width="180&q......
  • P5904 [POI2014] HOT-Hotels 加强版
    自然的想法是枚举共同的交点,然后进行换根dp,复杂度可以做到\(\mathcalO(n^2)\),可以通过简单版,但是显然过不了\(10^5\)的数据,考虑进行优化。记\((x,y,z)\)为满足要求的点,即满足\(a=b+c\),树形dp原则是子树内的信息无后效性,尽量把子树内的信息合并在一起。所以\(a-b=c\),......
  • uiautomator2 截图+压缩图片+放入allure报告中
    defsave_screenshot(self,screenshot_path):"""截图保存到某个路径:paramscreenshot_path::return:"""self.d.screenshot(screenshot_path) screenshot_path=f&quo......
  • xhEditor 从word中复制内容带多张图片
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • [ Vue ] opensslErrorStack: [ ‘error:03000086:digital envelope routines::initial
    报错触发场景:Mac系统,开发工具启动从其他地方拷贝或者git克隆来的,非自建前端Vue项目时。报错内容如下: opensslErrorStack:['error:03000086:digitalenveloperoutines::initializationerror'], library:'digitalenveloperoutines', reason:'unsupported', code......
  • element-ui
    安装npmielement-ui-S引入Element在main.js中写入以下内容:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);new......
  • shell脚本通过read实现与键盘交互
    #!/bin/bashread-p"输入你想执行的操作(run|kill):"execread-p"输入对应的进程(server|web|all):"processfunctionrun_process(){case${1}inall)echo'启动所有进程';;server)echo'只启动server'......