pc 多张图片文件上传 多张单张上传

效果

<template>
   <div class="myBox" :class="{'big':isbig}" v-loading="loading">
         
<div :class="{'dragBoxBig':isbig}">
          <div class="dragBox ">
            <!-- contain -->
            <div class="mr-10 mt-10 contentImgItem2" v-for="(item,index) in images" :key="index">
              <el-image style="width: 40px; height: 40px" :src="item.url" fit="cover"></el-image>
              <span @click="removeIndexImg(index)" class="contentImgDel"><i class=" el-icon el-icon-error"></i></span>
            </div>
          </div>
          <div class="success-up">
            <div v-for="(item,index) in fileArr" :key="index" class="file-list">
              <span class="icon">
                <!-- <i class="el-icon-document"></i> -->
                <img class="img" style="width:15px" :src="getFormat(item.name)" alt="">
              </span>
              <span class="file-text" :title="item.name+'('+(item.size/1024/1024).toFixed(3)+'MB)'">{{item.name}}({{(item.size/1024/1024).toFixed(3)}}MB)</span>
              <span class="success"> <i class="el-icon-success"></i>上传完成</span>
              <span class="el-icon-circle-close close1" @click="deleteFile(index)"></span>
            </div>
          </div>
</div>
            <div class="myBoxFoot">
              <el-upload style="width:40px" class="fl" multiple  :action="action" :show-file-list="false" :before-upload="beforeUpload" :headers="headers" accept=".jpg,.jpeg,.png,.bmp" :on-error="upError"  :on-success="success">
                <div class="accessory">
                  <i style="font-size:20px" class="el-icon-picture-outline"></i>
                  <!-- <span>上传图片</span> -->
                </div>
              </el-upload>

              <el-upload style="width:40px" class="fl"  :action="action" :show-file-list="false" :before-upload="beforeUpload2" :headers="headers"  accept=".doc,.pdf,.xlsx,.xls" :on-error="upError" :on-success="success2">
                <div class="accessory">
                  <!-- <span>上传附件</span> -->
                    <i style="font-size:20px" class="el-icon-folder-opened"></i>
                </div>
              </el-upload>
               <div class="div3" @click="clickBig">
                 <i style="font-size:20px" class="el-icon-full-screen"></i>
                 </div>
            </div>
          </div>
</template>
<script>
import { getToken } from '@/base/cookie'
export default {
  props: {
    images: {
      type: Array,
      default: () => []
    },
    fileArr: {
      type: Array,
      default: () => []
    },
    form: {
      type: Object,
      default: () => {}
    },
    isRemark: {
      type: String,
      default: () => 'remark'
    }
  },
  watch: {

  },
  data () {
    return {
      fileIcon1: require('@/assets/followUp/upimg.png'),
      fileIcon2: require('@/assets/followUp/upfile.png'),
      fileIcon3: require('@/assets/followUp/upBlowup.png'),
      isbig: false,
      headers: {
        'X-Token': getToken()
      },
      loading: false,
      // fileArr: [],
      // images: [],
      action: process.env.VUE_APP_UPLOADER_API + '/file/upload'
    }
  },
  mounted () {

  },
  methods: {
    getFormat(url) { // 判断文件格式 赋予图标
      if (url.search('.docx') !== -1 || url.search('.doc') !== -1) {
        const data = require('@/assets/followUp/docIcon.png')
        return data
      } else if (url.search('.pdf') !== -1) {
        const data = require('@/assets/followUp/pdfIcon.png')
        return data
      } else if (url.search('.ppt') !== -1 || url.search('.pptx') !== -1) {
        const data = require('@/assets/followUp/pptIcon.png')
        return data
      } else if (url.search('.xlsx') !== -1 || url.search('.xls') !== -1) {
        const data = require('@/assets/followUp/excelIcon.png')
        return data
      } else {
        const data = require('@/assets/followUp/pptIcon.png')
        return data
      }
    },
    // 上传
    getFocus() {
      this.$emit('getFocus')
    },
    beforeUpload(file) {
      if (this.images.length === 10) {
        this.$message.warning('限制照片最多上传10个')
        return
      }

      // 图片类型限制
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/bmp') {
        this.$message.warning('只支持jpg,jpeg,png/bmp格式图片!')
        return false
      }
      var size = 1024 * 1024 * 10
      // 图片大小限制
      if (file.size > size) {
        const strSize = Math.floor(size / 1024 / 1024)
        this.$message.warning(`图片最大为${strSize}MB!`)
        return false
      }
      // this.getloading()
      this.loading = true
    },
    getloading() {
      this.loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'hsla(0,0%,100%,.9)'
      })
    },
    closeLoading() {
      this.loading.close()
    },
    upError() {

    },

    success(response, file, fileList) {
      // console.log(fileList)
      // const imgCopy = JSON.parse(JSON.stringify(this.images)).length
      if (response.code === 200) {
        if (this.images.length < 10) {
          this.images.push({
            type: 1,
            url: response.data.filePath,
            size: response.data.fileSize,
            name: response.data.fileName,
            suffix: response.data.fileFormat
          })
        }
        setTimeout(() => {
          // this.closeLoading()
          this.loading = false
        }, 1000)
      } else {
        // this.closeLoading()
        this.loading = false
        this.$message.warning(response.message)
      }
    },
    // 上传文件
    beforeUpload2(file) {
      if (this.fileArr.length === 5) {
        this.$message.warning('限制文件最多上传5个')
        return
      }
      const allowType = ['.doc', '.pdf', '.xlsx', '.xls']
      var index = allowType.indexOf(file.name.substring(file.name.lastIndexOf('.')).toLowerCase())
      if (index < 0) {
        this.$message({
          message: '文件格式不正确',
          type: 'warning'
        })
        return false
      }
      var size = 1024 * 1024 * 10
      // 图片大小限制
      if (file.size > size) {
        const strSize = Math.floor(size / 1024 / 1024)
        this.$message.warning(`文件最大为${strSize}MB!`)
        return false
      }
      this.loading = true
    },

    success2(response, file, fileList) {
      if (response.code === 200) {
        if (this.fileArr.length < 5) {
          this.fileArr.push({
            type: 2,
            url: response.data.filePath,
            size: response.data.fileSize,
            name: response.data.fileName,
            suffix: response.data.fileFormat
          })
        }
        this.loading = false
        // this.$refs.form.clearValidate('images')
      } else {
        this.loading = false
        this.$message.warning(response.message)
      }
    },
    // 删除上传的文件
    deleteFile(index) {
      this.msg = ''
      this.fileArr.splice(index, 1)
    },
    removeIndexImg(ix) {
      this.images.splice(ix, 1)
    },
    clickBig() {
      this.isbig = !this.isbig
    }
  }
}
</script>

<style lang="scss" scoped>
.myBox{
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  /deep/.el-textarea__inner{
    border:none
  }
  .myBoxFoot{
    margin-top:8px;
    padding: 5px 8px 0;
    height: 40px;
    line-height: 40px;
    background-color: #d9d9d9;
    .div3{
      float: right;
    }
  }
   .dragBox { // 图片展示
      margin:15px 0 0 5px;
      width: calc(100% - 0px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;

      .contentImgItem2 {
        flex-wrap: wrap;
        width: 40px;
        height: 40px;
        // border: 1px dashed #cccccc;
        position: relative;
        .contentImgDel {
          position: absolute;
          right: -6px;
          top: -6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            width: 100%;
            font-size: 12px;
            // color: #409eff;
            // color: #fff;
            // background:#666666;
            // border-radius: 40px;
          }
        }
      }
    }
      .success-up { // 文件展示
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        .file-list {
          width: 100%;
          padding: 0 2px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:hover {
            background: rgba(229, 241, 303,0.5);
          }
          .icon {
            color: #333;
            margin-right: 5px;
          }
          .file-text {
              width: calc(100% - 155px);
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              color: #333;
              i {
                color:#666;
                margin-left: 10px;
              }
            }
            .success{
              display: block;
              height: 24px;
              width: 82px;
              line-height: 24px;
              background-color: #d7eae3;
              color: #4CBD11;
              padding:0 5px;
            }
          .close1 {
            text-align: center;
            width: 50px;
            font-size: 18px;
            color: rgba(216, 216, 216, 1);
            cursor: pointer;
            &:hover {
              color: red;
            }
          }
        }
      }
  &.big{
    overflow-y: auto;
    overflow-x: hidden;
    border: 0px solid #d9d9d9;
    border-radius: 0;

    position: fixed;
    top: 0;
    left: 0;
    width:100vw;
    height: 100vh;
    z-index: 2003;
    padding: 14px 35px;
    background: #fff;
    .dragBoxBig{
      height: 300px;
      overflow-y: auto;
      overflow-x: hidden;
    }
      .myBoxFoot{
        position: fixed;
        bottom: 0px;
        // left: 0px;
        width: 96%;
      }
  }
}
</style>