在使用elementui上传组件时,可以一次选择多个文件上传,设置:multiple="true"可以选择多个文件,但是文件请求的时候还是分开请求,多少个图片请求多少次。

现在需求时一次请求上传所有选中的图片

主要步骤:(1)通过elementui组件选取需要上传图片(2)封装上传函数

代码:

hmtl部分:

<!-- 上传图片 -->
      <el-dialog title="选择上传图片" :visible.sync="dialogVisible_up_image" width="30%">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="" 	<!-- 因为是自定义的上传方式,此处可以不填 --> 
          :multiple="true"       <!-- 可以选择多个文件 -->       
          :auto-upload="false"   <!-- 取消自动上传,手动点击时才上传图片 -->      
          :before-upload="beforeAvatarUploadImage" <!-- 上传之前判断图片格式 -->
          :file-list="fileList"  <!-- 上传图片列表 -->     
          :limit="6"             <!-- 最大同时上传数量 -->       
          :on-change="handleChange"<!-- 图片状态改变时,添加图片到自定义列表中(定义的:fileList) -->  
          list-type="picture"    <!-- 文件列表类型,这里上传的是图片,可以改成对应上传格式 -->        
        >
          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="primary"
            @click="uploadForm" <!-- 自定义的上传函数(核心) -->   
          >上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传png、jpg格式的图片</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_up_image = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible_up_image = false">确 定</el-button>
        </span>
      </el-dialog>

js部分

    // 判断图片格式
    beforeAvatarUploadImage(file) {
      const isJpeg = file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpeg) {
        this.$message.error('请选择正确的文件格式上传')
      }
      return isJpeg
    },
    // 选择文件时,往fileList里添加
    handleChange(fileList) {
      this.fileList.push(fileList)
    },
    // 批量上传
    uploadForm() {
      // this.$refs.upload.submit()
      if (this.fileList.length === 0) {
        this.$message.warning('请选取文件')
        return
      }
      const formData = new FormData()
      // 因为要传一个文件数组过去,所以要循环append
      this.fileList.forEach(file => {
        formData.append('files', file.raw)
      })
      formData.append('userId', this.userId) // 自定义参数
      this.$axios.post('http://117.78.49.148:8088/medical-care/common/uploadFile/FullPaths', formData).then(res => {
        this.$message.success('图片上传成功!')
        setTimeout(() => {
          this.dialogVisible_up_image = false
        }, 500)
      }).catch(res => {
        this.$message.success('图片上传失败!')
        setTimeout(() => {
          this.dialogVisible_up_image = false
        }, 500)
      })
      // 清空图片列表(一定要清空,否则上传成功后还是会调用handleChange()函数,上传成功后列表中还存在图片)
      this.fileList = []
    }

结果所示

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐