antd上传文件+类型判断

antd上传文件+类型判断

校验函数

//checkImageWH 必须为正方形  返回一个promise  检测通过返回resolve  失败返回reject阻止图片上传
export function checkImageSameWH(file) {
  return new Promise(function (resolve, reject) {
    let filereader = new FileReader()
    filereader.onload = e => {
      let src = e.target.result
      const image = new Image()
      image.onload = function () {
        if (this.width !== this.height) {
          // debugger
          Modal.error({
            title: '上传文件的宽高必须一致，请重新上传',
          })
          reject()
        } else {
          resolve()
        }
      }
      image.onerror = reject
      image.src = src
    }
    filereader.readAsDataURL(file)
  })
}
//检验文件大小
export function checkSize(file, size) {
  return new Promise(function (resolve, reject) {
    if (file.size / 1024 / 1024 > size) {
      Modal.error({
        title: '文件大小超出限制，请重新上传',
      })
      reject()
    } else {
      resolve()
    }
  })
}
//检验文件类型
export function checkType(file, typeList) {
  return new Promise(function (resolve, reject) {
    if (!typeList.includes(file.type)) {
      Modal.error({
        title: '文件类型错误，请重新上传',
      })
      reject()
    } else {
      resolve()
    }
  })
}

引入使用

//引入
import { checkImageSameWH, checkSize, checkType } from '@/utils/upload'

//使用（上传图片例子，其他基本一样）

 <Form.Item
                className={styles.item}
                name="thumbnail"
                label="缩略图"
                extra="支持拓展名：jpg，png，大小限制50k"
                required
              >
                <Upload
                  action="你的上传地址"
                  listType="picture-card"//类型
                  fileList={thumbnail}//数据
                  data={file => {
                    return { upfile: file }
                  }}
                  accept=".jpg,.png"
                  beforeUpload={(file, fileList) => {
                     /**
                     *这里做校验
                     */
                    return Promise.all([
                      checkType(file, ['image/png', 'image/jpeg']),
                      checkSize(file, 50 / 1024),
                      checkImageSameWH(file),
                    ])
                  }}
                  onChange={({ fileList }) => {
                    fileList = fileList.map(file => {
                      if (file.response) {
                        file.url = file.response.data.url
                      }
                      return file
                    })
                    setThumbnail(fileList)
                  }}
                >
                  {thumbnail.length >= 1 ? null : uploadButton}
                </Upload>
 </Form.Item>

遇到的问题

上传音频时校验类型填这个[‘audio/mp3’]有的类型错误，百度了一下加了个[‘audio/mp3’, ‘audio/mpeg’]就好了

补充

我记录了一些常用的类型，更多参考
http://www.iana.org/assignments/media-types/media-types.xhtml

后缀
*.3gpp	audio/3gpp, video/3gpp
*.ac3	audio/ac3
*.asf	allpication/vnd.ms-asf
*.au	audio/basic
*.css	text/css
*.csv	text/csv
*.doc	application/msword
*.dot	application/msword
*.dtd	application/xml-dtd
*.dwg	image/vnd.dwg
*.dxf	image/vnd.dxf
*.gif	image/gif
*.htm	text/html
*.html	text/html
*.jp2	image/jp2
*.jpe	image/jpeg
*.jpeg	image/jpeg
*.jpg	image/jpeg
*.js	text/javascript, application/javascript
*.json	application/json
*.mp2	audio/mpeg, video/mpeg
*.mp3	audio/mpeg
*.mp4	audio/mp4, video/mp4
*.mpeg	video/mpeg
*.mpg	video/mpeg
*.mpp	application/vnd.ms-project
*.ogg	application/ogg, audio/ogg
*.pdf	application/pdf
*.png	image/png
*.pot	application/vnd.ms-powerpoint
*.pps	application/vnd.ms-powerpoint
*.ppt	application/vnd.ms-powerpoint
*.rtf	application/rtf, text/rtf
*.svf	image/vnd.svf
*.tif	image/tiff
*.tiff	image/tiff
*.txt	text/plain
*.wdb	application/vnd.ms-works
*.wps	application/vnd.ms-works
*.xhtml	application/xhtml+xml
*.xlc	application/vnd.ms-excel
*.xlm	application/vnd.ms-excel
*.xls	application/vnd.ms-excel
*.xlt	application/vnd.ms-excel
*.xlw	application/vnd.ms-excel
*.xml	text/xml, application/xml
*.zip	aplication/zip
*.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet