The accept attribute of the El upload upload component restricts the file type (detailed explanation of the case)

【 Chen Xi has to work hard 】：hello Hello, I'm Chen Xi , I'm glad you came to read , Nickname is the hope that you can constantly improve , Moving forward to good programmers ！

The blog comes from the project and the summary of the problems encountered in programming , Occasionally there are books to share , I'll keep updating Java front end 、 backstage 、 database 、 Project cases and other related knowledge points summary , Thank you for your reading and attention , I hope my blog can help more people , Share and gain new knowledge , Make progress together !

We quarryers , The heart of a cathedral , I wish you all to go in your love …

---

One 、 Preface of the article

Upload components for basic learning ：Element-UI in el-upload Upload components （demo Detailed explanation ）

In most cases, file upload needs to limit the file type ： Of course, for the front and rear ends , The front end can filter files , The background can also synchronously filter files , Filter out the unqualified files

For the server, don't leave what can be filtered out at the front end to the background. There's no need to put unnecessary pressure on the server

I've sorted it out before :before-upload="beforeUpload" This attribute , Callback before uploading , Limiting file types

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

Limit the size of the file , All types of restricted files can be operated here , If the file you uploaded doesn't meet the requirements , The corresponding prompt message will be given here

      beforeUpload(file) {
    
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
    
          this.$message.error(' Uploading a picture of your head can only be  JPG  Format !');
        }
        if (!isLt2M) {
    
          this.$message.error(' The size of the uploaded image cannot exceed  2MB!');
        }
        return isJPG && isLt2M;
      }
    }

This article focuses on element It provides us with accept attribute , That is, when selecting files, filter them directly

---

Two 、 Attribute explanation

We use element Official website file upload test , Normally, we click , Here are all the files

Let's first create a file upload test folder and put some files

Synchronization if we want to limit the type of file upload at the front end, we can do it at :before-upload="beforeAvatarUpload" The corresponding verification method in the binding

But this is not concise and practical enough

element It provides us with accept attribute Accept the type of file uploaded

Here we add accept Property to filter files , Look at the effect

Use accept Property filters files directly when you open a folder

Common document upload filters are as follows , Of course, you filter according to your business

 accept=".pdf, .doc, .docx, .xls, .xlsx"

For more screening, please refer to

 accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"

accept Attribute collocation :before-upload="beforeUpload" Attributes use

beforeUpload(file) {
    
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
 
  const whiteList = ["pdf", "doc", "docx", "xls", "xlsx"];
 
  if (whiteList.indexOf(fileSuffix) === -1) {
    
    this.$message.error(' Upload files can only be  pdf、doc、docx、xls、xlsx Format ');
    return false;
  }
 
  const isLt2M = file.size / 1024 / 1024 < 2;
 
  if (!isLt2M) {
    
    this.$message.error(' The size of the uploaded file cannot exceed  2MB');
    return false;
  }
}

If you need to limit the file type, it is recommended to use more accept attribute , :before-upload="beforeUpload" More just help us check or prompt , Of course, if you want to limit the file size or the proportion of pictures, you can add operations in this attribute ！

---

3、 ... and 、 Expand knowledge

be based on vue-simple-uploader The package file fragment upload component limits the type of file

The project done some time ago uses fragment upload , involves video , Audio , file Upload , Synchronization also involves filtering , After consulting relevant materials, the problem has also been solved

The fragment upload component is mainly used to upload large files , Compared with the traditional problem, the upload efficiency is higher , Faster

Fragment upload components often bind an attribute , Attribute accept The following can be limited separately , picture , video , Audio upload , When selecting files, directly filter out the corresponding files

picTypeFile: {
     accept: 'image/*' }

videoTypeFile: {
     accept: 'video/*' }

audioTypeFile: {
     accept: 'audio/*' }

For specific use, try according to the attribute document corresponding to your current component ！

File upload to this section , I also have a lot of shortcomings , I will update more basic articles in the future , Welcome to learn, exchange and share , Progress together ！

---

Thank you very much for reading here , If this article helps you , I hope I can leave your praise Focus on ️ Share Leaving a message. thanks！！！

2021 year 5 month 30 Japan 10:44:31 May you go to your love ！