input type=file 上传多张图片（文件同理）

<form method="post" enctype="multipart/form-data">
    <div>
      <label for="file">选择要上传的文件</label>
      <input
        type="file"
        id="upLoad"
        name="upLoad"
        ref="upLoadRef"
        @change="updateImageDisplay"
        multiple
        accept="image/jpg, image/jpeg, image/png"
      />
    </div>
  </form>

input属性：

        type=file  文件格式

        multiple   是否支持上传多个文件，默认不添加该属性为false

        accept   当前上传文件接收的格式

updateImageDisplay () {
      const curUpImgList = []
      const curFiles = this.$refs.upLoadRef.files
      if (curFiles.length === 0) {
        console.log('No files currently selected for upload')
      } else {
        for (const file of curFiles) {
          if (this.validFileType(file)) {
            const size = this.returnFileSize(file.size)
            const image = {
              name: file.name,
              size
            }
            image.src = URL.createObjectURL(file)
            curUpImgList.push(image) // 当前选中符合格式的图片
          } else {
            console.log(
              `File name ${file.name}: Not a valid file type. Update your selection.`
            )
          }
        }
      }

      this.$refs.upLoadRef.value = '' // 置空input文件
    },
    // 校验文件输入类型
    validFileType (file) {
      const fileTypes = ['image/jpeg', 'image/png', 'image/jpg']
      return fileTypes.includes(file.type)
    },
    // 转换文件为可读模式大小
    returnFileSize (number) {
      if (number < 1024) {
        return `${number} bytes`
      } else if (number >= 1024 && number < 1048576) {
        return `${(number / 1024).toFixed(1)} KB`
      } else if (number >= 1048576) {
        return `${(number / 1048576).toFixed(1)} MB`
      }
    }

 updateImageDisplay：input的change触发事件

validFileType：校验文件的输入类型

returnFileSize：将文件大小转换成bytes、KB、MB单位