“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

In the process of uploading files, it is always necessary to limit and judge the uploaded files in terms of design requirements, so as to avoid blind operation by users. As a result, correct information cannot be obtained if the uploaded file type is incorrect, resulting in bad experience. Therefore, we need to judge the file type on the page

Here we use element’s upload component as an example. Most upload components are similar, so we will not give an example here.

This time we are limiting the type of images

First we use components

<el-upload

  accept="image/*"

  class="avatar-uploader"

  action="https://jsonplaceholder.typicode.com/posts/"

:before-upload="beforeAvatarUpload"

</el-upload>

Copy the code

The Accept attribute can only be used in conjunction. It specifies the types of files that can be submitted through file uploads.

value describe
audio/* Accept all sound files.
video/* Accept all video files.
image/* Accept all image files.
MIME_type A valid MIME type, with no parameters. Please refer to theIANA MIME typeTo get a complete list of standard MIME types.

We can see from Element’s website that the hook before uploading a file is a before-upload

Check the file type

In most files, in the file property, we have the type property, so we can judge by the type property

beforeUpload(file) { const isJPG = file.type === 'image/jpeg' if (! IsJPG) {this.$message.error(' Upload avatar only JPG! '); } return isJPG; }Copy the code

Check the file name

However, there are still a few files that do not have type. I have encountered this before. I do not know whether it is due to the system or the file itself

This is the filename suffix, and files on both Windows and MAC OS have suffixes

so

beforeUpload(file) { const typeArry = ['.jpg', '.png', '.bmp', '.JPG', '.PNG', '.BMP', '.gif', '.GIF']; const type = file.name.substring(file.name.lastIndexOf('.')); const isImage = typeArry.indexOf(type) > -1; if (! $message.error(' Upload file must be an image '); } return isImage; },Copy the code

Determine the file type by reading binary data of the file

Above, the two ways can solve the vast majority of files, but there are always some stubborn elements, neither type, nor file name suffix, or other factors, can not be further determined.

So we can read the binary data of the file to determine the file type

In this article, there are also detailed instructions on how to do Antd Upload a checksum of a single image.

Mainly by magic numbers. PNG magic number is 0x89 50 4E 47 0D 0A 1A 0A, we can read the first 8 bytes of the file binary to determine the file type one by one:

Common picture magic number

JPEG (JPG), file header: FFD8FF PNG (PNG), file header: 89504E47 GIF (GIF), file header: 47494638 TIFF (tif), file header: 49492A00

const getBuffers = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsArrayBuffer(file.slice(0, 8)); reader.onload = () => { resolve(reader.result); }; reader.onerror = reject; })};Copy the code

Refer to the link

  1. Element. The eleme. Cn / # / useful – cn/com…
  1. Juejin. Cn/post / 697726…