vue上传--多张上传--支持同时上传多张图片的组件

<template>
  <div class="staffUpData">
    <el-dialog :close-on-click-modal="false" :visible.sync="isshow" width="800px" @close="closedialog">
      <div class="post-information-title"><span><img src="@/icons/rightArrow.png" alt=""></span>
        人事电子资料上传</div>
      <!-- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      show-file-list 是否显示已上传文件列表
      auto-upload 是否在选取文件后立即进行上传
      -->
      <p style="font-size: 12px;color: #ccc;margin-top:20px;">可上传pdf、jpg、jpeg、png格式，不能超过50M</p>
      <el-upload
        ref="upload"
        :action="baseurl+'/employeeManage/uploadElectronicData'"
        list-type="picture-card"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
        :on-remove="handleRemove"
        :on-change="changeUpload"
        :show-file-list="true"
        accept="image/png, image/jpeg, application/pdf"
        :multiple="true"
        :data="form"
      >
        <i class="el-icon-plus" />
        <!-- :auto-upload="false"  -->
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
      </el-upload>
      <!-- :on-preview="handlePictureCardPreview" -->
      <!-- 确定按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isshow = false">取 消</el-button>
        <el-button type="primary" :loading="isloading" @click="uploadSumit">确 定</el-button>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-dialog>
  </div>

</template>

<script>
import { uploadElectronicData } from '@/api/staffhmc'

export default {
  name: 'StaffUpData',
  components: {},
  data() {
    return {
      isloading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      isshow: false,
      imageUrl: '',
      baseurl: process.env.VUE_APP_BASE_API,
      form: {
        electronicDataList: [],
        employeeId: '',
        dirName: 'public/personnel/userinfo'
      },
      fileList: []
    }
  },
  computed: {
    // form() {
    //   return {
    //     electronicDataList: [],
    //     employeeId: '',
    //     dirName: 'public/personnel/userinfo'
    //   }
    // }
  },
  created() {
  },
  mounted() {
    this.$emit('getUploadSuccess', 1)
  },
  methods: {
    closedialog() {
      this.$refs.upload.clearFiles()
    },
    uploadSumit() { // 上传文件
      this.isloading = true
      uploadElectronicData(this.form).then((res) => {
        this.$emit('getUploadSuccess')
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.form.electronicDataList = []
        this.isshow = false
        this.isloading = false
      }).catch((e) => {
        this.$message({ message: '上传失败', type: 'error' })
        this.form.electronicDataList = []
        this.isshow = false
        this.isloading = false
      })
    },
    openDialog(employeeId) {
      this.isshow = true
      this.form.employeeId = employeeId
      // employeeId && this.editEmployeeStatusDetail()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
    },
    // 删除
    handleRemove(file, fileList) {
    },
    // 上传之前
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPng = file.type === 'image/png'
      const isPdf = file.type === 'application/pdf'
      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isLt50M) {
        this.$message.warning('上传文件大小不能超过 50MB!')
        return false
      }
      if (!isJPG && !isPng && !isPdf) {
        this.$message.warning('只能上传 JPG/PNG/PDF/JPEG 格式!')
        return false
      }
    },
    // 上传成功
    handleAvatarSuccess() {
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    changeUpload(file, fileList) {
      // if (file.status === 'ready') {
      //   const isJPG = file.raw.type === 'image/jpeg'
      //   const isPng = file.raw.type === 'image/png'
      //   const isPdf = file.raw.type === 'application/pdf'
      //   const isLt50M = file.raw.size / 1024 / 1024 < 50
      //   if (!isLt50M || (!isJPG && !isPng && !isPdf)) {
      //     this.$message.warning('上传文件只能上传 JPG/PNG/PDF 格式, 大小不能超过 50MB!')
      //     return
      //   }
      //   this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((item) => {
      //     return item.raw.size / 1024 / 1024 < 50 && (item.raw.type === 'image/jpeg' || item.raw.type === 'image/png' || item.raw.type === 'application/pdf')
      //   })
      // }
      if (file.status === 'success') {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((item) => {
          return item.raw.size / 1024 / 1024 < 50
        })
        this.tobase64(file)
      }
    },
    tobase64(file) {
      // this.form.electronicDataList = []
      // for (let i = 0; i < fileList.length; i++) {
      //   var reader = new FileReader()
      //   // fileList[i].raw === file.raw
      //   reader.readAsDataURL(fileList[i].raw)
      //   reader.onload = (e) => {
      //     const tempobj = {
      //       data: e.target.result.split(',')[1],
      //       suffix: '.' + fileList[i].raw.type.split('/')[1],
      //       fileName: fileList[i].name
      //     }
      //     console.log(i)
      //     this.form.electronicDataList.push(tempobj)
      //   }
      // }
      var reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = (e) => {
        const tempobj = {
          data: e.target.result.split(',')[1],
          suffix: '.' + file.raw.type.split('/')[1],
          fileName: file.name
        }
        this.form.electronicDataList.push(tempobj)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.post-information-title{
  font-size: 15px;
  margin: -35px 10px 10px 10px ;
  color: dodgerblue;
  span{
    display: inline-block;
    width: 11px;
    height: 100%;
    img{
      width: 100%;
    }
  }
}
</style>

<style lang="scss">
.staffUpData .el-upload-list--picture-card .el-upload-list__item{
  overflow: inherit;
  float: left;
  background:rgba(255,94,94,1);
  margin-top:20px;
  img{
    display: block;
  }
}
.staffUpData .el-upload-list--picture-card .el-upload-list__item-name{
  display:block;
  width:100%;
}
.staffUpData .el-upload--picture-card{
  margin-top:20px;
}
.el-upload-list__item.is-success .el-upload-list__item-status-label{
  display: none!important;
}
</style>