上传组件遇到的一些问题

1.真正的限制上传文件的类型

beforeAvatarUpload(file) {
      
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        // 限制文件大小
        this.$message.error(`当前限制文件大小不能大于2MB!`)
        return false
      }
      const suffix = this.getFileType(file.name) // 获取文件后缀名
      console.log('suffix', suffix)
      const suffixArray = ['jpg', 'png', 'jpeg'] // 限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix) === -1) {
        console.log('wopanduan')
        this.$message.error('图片格式错误!')
        return false
      }
      return suffixArray && isLt2M
    },
    getFileType(name) {
      const startIndex = name.lastIndexOf('.')
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase()
      } else {
        return ''
      }
    },

2.图片上传-多个（作为公共组件）

<template>
  <!-- 图片上传-多个 -->
  <div>
    <div style="display: flex; flex-wrap: wrap">
      <template v-if="imgsUrlArr.length > 0"> 
      // draggable 可拖拽的插件
        <draggable
          :move="onMove"
          :list="imgsUrlArr"
          :animation="200"
          :disabled="!isDragger"
        >
          <transition-group>
            <div
              v-for="(item, index) in imgsUrlArr"
              :key="index"
              class="item-img"
            >
              <img :src="item" width="100%" height="100%">
              <div v-if="isUp" class="delete" @click="delImg(index)">
                <i class="el-icon-close" />
              </div>
            </div>
          </transition-group>
        </draggable>
      </template>
      <div
        v-if="isUp && imgsUrlArr.length < maxNum"
        v-loading="loading"
        style="display: flex;"
      >
        <el-upload
          ref="uploadSingle"
          class="uploader"
          :action="fileUpUrl"
          accept=".jpg,.png,.jpeg"
          :headers="{ 'web-token': token }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div class="up-box">
            <i class="el-icon-picture-outline uploader-icon" />
            <span>上传图片</span>
          </div>
        </el-upload>
        <div class="maxnum">
          <span :style="{'color': imgsUrlArr.length?'#FFA900':''}">{{ imgsUrlArr.length }}</span>
          /
          <span>{{ maxNum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: {
    // 图片数组
    url: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否可上传
    isUp: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 是否拖动
    isDragger: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 最大上传数量
    maxNum: {
      type: Number,
      default: () => {
        return 9
      }
    }
  },
  data() {
    return {
      loading: false,
      fileUpUrl: `${process.env.VUE_APP_APIHOST}/apiweb/web/portalGoodsComment/uploadFile`,
      imgsUrlArr: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  watch: {
    url: {
      handler(newValue, oldValue) {
        this.imgsUrlArr = newValue || []
      }
    }
  },
  mounted() {
    this.imgsUrlArr = this.url || []
  },
  methods: {
    delImg(index) {
      this.imgsUrlArr.splice(index, 1)
      this.$emit('change', this.imgsUrlArr)
    },
    handleAvatarSuccess(res, file, fileList) {
      this.loading = false
      if (res.code === 200) {
        if (this.imgsUrlArr.length >= this.maxNum) {
          this.$message.warning(`最多上传${this.maxNum}张图片`)
        } else {
          this.imgsUrlArr.push(res.msg)
          this.$emit('change', this.imgsUrlArr)
        }
      } else {
        this.$message.warning(res.msg)
      }
    },
    beforeAvatarUpload(file) {
      this.loading = true
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        // 限制文件大小
        this.$message.error(`当前限制文件大小不能大于2MB!`)
        return false
      }
      const suffix = this.getFileType(file.name) // 获取文件后缀名
      const suffixArray = ['jpg', 'png', 'jpeg'] // 限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix) === -1) {
        this.$message.error('图片格式错误!')
        return false
      }
      return suffixArray && isLt2M
    },
    getFileType(name) {
      const startIndex = name.lastIndexOf('.')
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase()
      } else {
        return ''
      }
    },
    handleClear() {
      this.imgsUrlArr = []
    },
    onMove(relatedContext, draggedContext) {
      // console.log(relatedContext.relatedContext.list)
      const list = relatedContext.relatedContext.list
      this.imgsUrlArr = list
      this.$emit('change', this.imgsUrlArr)
    }
  }
}
</script>

<style lang="scss">
.item-img {
  width: 96px;height: 96px;
  border-radius: 5px;
  position: relative;
  margin-right: 10px;
  overflow: hidden;
  border: 1px solid #E7E7E7;
  display: inline-block;
}
.delete {
  position: absolute;top: 0px;right: 0;
  background-color: rgba($color: #666, $alpha: 0.6);
  @include flex;
  cursor: pointer;
  width: 20px;height: 20px;
  border-radius: 0 0 0 70%;
  padding: 0 0 2px 2px;
  i {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
  }
}
// 上传图片
.uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 96px;height: 96px;
  border-radius: 5px;
  border: 1px dashed #E7E7E7;
  @include flex;
}
// .uploader .el-upload:hover {
//   border-color: #000;
// }
.up-box {
  width: 100%;height: 100%;
  @include flex-col-center;
  color: #666666;
  .uploader-icon {
    font-size: 20px;
  }
  span {
    font-size: 12px;
    line-height: 1;
    margin-top: 10px;
  }
}
.maxnum {
  margin: 80px 0 0 8px;
  color:#999;
  font-size: 12px;
  line-height: 1;
}
</style>

上传多个文件成功后数据处理

handleChange(res, file, fileList) {
      if (fileList.every(it => it.status == 'success')) {
        fileList.map(item => {
          console.log('item', item)
          item.response && this.fileListIn.push({ name: item.name, url: item.response.data }) // 只push新上传的 （带有response）
        })
        this.$emit('change', this.fileListIn)
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
        this.fileListIn = []
      }
    }