首页 > 其他分享 >el-upload手动上传多个文件

el-upload手动上传多个文件

时间:2023-06-10 17:47:29浏览次数:42  
标签:el console log upload fd file 上传 fileObject

<el-upload 
        class="upload-demo"
        ref="uploadsss"
        multiple
        action="https://jsonplaceholder.typicode.com/posts/"
        :headers="upload.headers"
        :auto-upload="false"
        list-type="picture-card"
        :accept="acceptType"
        :file-list="fileList"
        :http-request="handleFileUpload"
        :on-change="(file, fileList) => {handelOnChange(file, fileList)}">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <el-popover
            placement="top"
            width="70"
            trigger="hover">
            <div style="display: flex;justify-content: space-around;">
              <el-link type="primary" :underline="false" @click="handlePictureCardPreview(file)">预览</el-link>
              <el-link type="primary" :underline="false"  @click="handleRemove(file,scope)">删除</el-link>
            </div>
            <!-- pdf格式 -->
            <img slot="reference"
              class="el-upload-list__item-thumbnail"
              src="../../../../assets/images/pdf.png" alt=""
              v-if="file.name.indexOf('.pdf') >= 0"
            >
            <!-- 图片格式 -->
            <img slot="reference"
              class="el-upload-list__item-thumbnail"
              :src="file.url" alt=""
              v-else
            >
          </el-popover>
        </div>
      </el-upload>

------------------------------------------------------------------------------------------------------
js部分
test(){       this.fd = new FormData();   // 新建一个FormData()对象,这就相当于你新建了一个表单      
      this.$refs.uploadsss.submit()       request({         url:'/project/management/uploads',         method:'post',         headers:{           ContentType:'multipart/form-data'         },         data:this.fd       }).then(res => {         console.log('文件上传成功')         console.log(res)       })
    },     async handleFileUpload(fileObject){       console.log(fileObject)
      this.fd.append("file", fileObject.file);  // 将文件保存到formData对象中           },


 

关键点:

 

 

标签:el,console,log,upload,fd,file,上传,fileObject
From: https://www.cnblogs.com/brillant/p/17471625.html

相关文章

  • Python中带else子句的for循环执行过程
    这几天在厦门讲课,每天6小时,没有太多时间写新代码,宾馆不知道咋想的也不提供WiFi,只好用手机做个热点临时分享一点基础知识,300M的包月流量伤不起,热点瞬间就把仅剩的40M流量用完了,赶紧发完关闭热点。在Python中,有while和for两种循环,并且都可以带有else子句。其中while循环常用于无法提......
  • Python操作Excel文件中多WorkSheet模拟数据库内连接查询
    严格意义上来讲,是可以把Excel文件看作数据库的,C#通过OLEDB.net就可以使用SQL语句操作Excel文件中的数据。本文代码使用Python扩展库openpyxl操作Excel文件中多个WorkSheet中的数据,模拟了数据库的内连接。假设Excel文件名为data.xlsx,其中第一个WorkSheet数据如下:第二个WorkSheet数据......
  • 使用Python获取Excel文件中单元格公式的计算结果
    假设有如下Excel文件,其中第二个WorkSheet中数据如下:其中D列为公式,现在要求输出该列公式计算的数值结果,代码如下:代码运行结果:......
  • UtilityHelper DbHelper
    usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.IO;usingSystem.Linq;usingSystem.Reflection;usingSystem.Runtime.Serialization;usingSystem.Runtime.Serialization.Formatters.Binary;usingSy......
  • Shellcode Execution in a Local Process with QueueUserAPC and NtTestAlert(nim学习
    ShellcodeExecutioninaLocalProcesswithQueueUserAPCandNtTestAlertAPC队列异步过程调用(APC)队列是一个与线程关联的队列,用于存储要在该线程上下文中异步执行的函数。操作系统内核会跟踪每个线程的APC队列,并在适当的时机触发队列中挂起的函数。APC队列通常用于实现线......
  • Python实现Excel与Word文件中表格数据的导入导出
    问题描述:Excel文件“测试文件.xlsx”中有3个worksheet,每个worksheet中的行数和列数都不相同,要求把这3个worksheet中的数据导入到一个Word文件中,每个worksheet生成一个单独的表格,每个表格的样式不同。在Excel和Word之间,是支持表格直接复制的,如果数量少,可以直接复制,如果多的话,可以参......
  • Python+pandas处理Excel文件案例一则
    问题描述:使用pandas读取Excel文件中的数据,输出关系最好的两个演员名称,也就是共同参演电影数量最多的两个演员的名称。数据格式请参考Python统计共同参演电影最多的演员组合,Python+pandas读取Excel文件并统计演员参演电影数量技术要点:pandas二维表格DataFrame的用法。参考代码:输出结......
  • Python批量导入Excel文件中的不重复数据到SQLite数据库
    自从2015年开始,为了上课方便,我编写了一个课堂管理系统并陆续增加了很多功能,已连续使用7个学期,在使用过程中也经常修补和完善其中一些细节。这个软件也是《Python可以这样学》最后一章的完整案例,涉及tkinter、数据库、多线程、Word文件操作、Excel文件操作、进程管理、二进制序列化......
  • Python+pandas分离Excel数据到同一个Excel文件中多个Worksheets
    封面图片:《Python程序设计(第2版)》,董付国,清华大学出版社===============问题描述:已知文件“超市营业额2.xlsx”中结构与部分数据如图所示:现在要求把每个员工的交易数据写入文件“各员工数据.xlsx”,每个员工的数据占一个worksheet,结构和“超市营业额2.xlsx”一样,并以员工姓名作为work......
  • Electron 案例
     Electron简介Electron是干什么的?简单来讲,Electron使用JavaScript,HTML和CSS,来构建跨平台的桌面应用程序。按照官方的说法:如果你可以建一个网站,你就可以建一个桌面应用程序。和传统的桌面应用相比,使用Electron开发更容易上手,开发效率更高。并且,web技术应用广泛、生态......