[Chen Xi should work hard]: hello, I'm Chen Xi. I'm glad you can read it. My nickname is that I hope I can constantly improve and move forward towards excellent programmers!

The blog comes from the summary of problems encountered in the project and programming. Occasionally, there will be reading and sharing. I will update the summary of relevant knowledge points such as Java front-end, background, database and project cases. Thank you for your reading and attention. I hope my blog can help more people share and obtain new knowledge and make progress together!

We quarryers should have the heart of a cathedral. May everyone rush to their own love

1, Preface of the article

For basic learning of uploading components, please refer to: El upload upload component in element UI (detailed explanation of demo)

In most cases, file upload needs to limit the file type: of course, for the front and back ends, the front end can filter files, and the background can also filter files synchronously to filter out 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 = "before upload" this attribute is the callback before uploading, which limits the file type

<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 and type of files can be operated here. If the file you upload does not meet the conditions, 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('Upload avatar pictures can only be JPG format!');
        }
        if (!isLt2M) {
          this.$message.error('The size of the uploaded avatar image cannot exceed 2 MB!');
        }
        return isJPG && isLt2M;
      }
    }

This article focuses on the fact that element provides us with the accept attribute, that is, to filter directly when selecting files

2, Attribute explanation

We use the official website of element to upload files for testing. Normally, we click. Here are all the files

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

Synchronization if we want to limit the type of file upload at the front end, we can bind the corresponding verification method in: before upload = "beforeavatarupload"

But this is not concise and practical enough

element gives us the accept attribute to accept the uploaded file type

Here we add the accept attribute to filter the files to see the effect

Use the accept attribute to filter the files directly when opening the folder

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

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

For more filtering, please refer to

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

Match the accept attribute: use the before upload = "before upload" attribute

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 file can only be pdf,doc,docx,xls,xlsx format');
    return false;
  }
 
  const isLt2M = file.size / 1024 / 1024 < 2;
 
  if (!isLt2M) {
    this.$message.error('Upload file size cannot exceed 2 MB');
    return false;
  }
}

As mentioned above, if you need to limit the file type, it is recommended to use the accept attribute more. Before upload = "beforeupload" is more just to 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, Expand knowledge

Based on Vue simple uploader package file fragment upload component, the type of file is limited

The project done some time ago used piecemeal upload, involving the upload of video, audio and documents, as well as synchronous screening. The problem of consulting relevant materials 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 and the speed is faster

The fragment upload component is often bound with an attribute. The accept in the attribute is written as follows, which can restrict the upload of pictures, videos and audio respectively. When selecting files, the corresponding files can be directly filtered out

picTypeFile: { accept: 'image/*' }

videoTypeFile: { accept: 'video/*' }

audioTypeFile: { accept: 'audio/*' }

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

I also have many shortcomings when uploading files to this section. I will update more basic articles in the future. Welcome to learn, exchange and share and make progress together!

Thank you very much for reading here. If this article is helpful to you, I hope to leave your praise 👍 follow ❤️ share 👥 Leaving a message. 💬 thanks!!!

At 10:44:31 on May 30, 2021, I wish you to go in your love!