el-upload手动上传多个文件

发布时间 2023-06-10 17:39:12作者: 埃菲尔上的加菲猫
<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对象中
     
    },


 

关键点: