[Chen Xi to work hard] : hello, I am Chen Xi, very glad you can read, nickname is to hope that they can continue to improve, toward excellent programmers! The blog comes from the summary of the problems encountered in the project and programming, and 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 case successively. Thank you for your reading and attention. We quarrymen, with the heart of the cathedral, may we go to our respective loves…

First, the preface

File uploading requires limiting file types in most cases. Of course, for the front end and back end, the front end can realize file filtering, and the back end can also realize file filtering synchronously, and filter out the files that do not meet the requirements

For the server, what can be filtered out at the front end should not be left to the background. There is no need to put unnecessary pressure on the server

Before-upload =”beforeUpload” this property, which is a callback before uploading, 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>
Copy the code

Limit the size of the file, limit the type of the file can be operated here, if you upload the file does not meet the requirements, there will be a corresponding prompt message

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

        if(! isJPG) {this.$message.error('Upload profile picture in JPG format only! ');
        }
        if(! isLt2M) {this.$message.error('Upload profile picture size cannot exceed 2MB! ');
        }
        returnisJPG && isLt2M; }}Copy the code

This article focuses on element, which gives us the Accept attribute, which filters directly when selecting a file

Second, attribute explanation

We use element’s official website file upload test, normally we click, here is all the files

Let’s first create a file upload test folder and put some files in itSync If we want to limit the type of file upload on the front end we can bind the verification method in :before-upload=”beforeAvatarUpload”

But this is not concise or practical enough

Element gives us the accept attribute to accept the type of file uploaded

Here we add the Accept attribute to filter the file and see what happens

The accept attribute is used to filter files directly when the folder is opened

Common filtering for document uploads is as follows, depending on your business of course

 accept=".pdf, .doc, .docx, .xls, .xlsx"
Copy the code

Please refer to more filters

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

Accept attribute is used with :before-upload=”beforeUpload” 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 IN 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 2MB');
    return false; }}Copy the code

Use accept if you want to limit the file type. :before-upload=”beforeUpload” is more for checking and prompting. You can add new actions in this property if you want to limit file size or image size.

Third, expand knowledge

The type of file is restricted by the vue-simple-uploader encapsulation file sharding upload component

Some time ago, the project used fragment upload, involvingVideo, audio, documentationUpload, also synchronization involves screening, access to the relevant information problems have been solved

The fragment upload component is mainly used to upload large files, which is more efficient and faster than the traditional problem upload

The shard upload component is usually bound to an attribute, in which accept is written to limit uploads of pictures, videos, and audio respectively. The corresponding files are directly screened out when selecting files

picTypeFile: { accept: 'image/*' }
Copy the code
videoTypeFile: { accept: 'video/*' }
Copy the code
audioTypeFile: { accept: 'audio/*' }
Copy the code

Specific use of you according to their current components of the corresponding properties of the document to try!

I also have a lot of shortcomings in this section. I will update more basic articles in the future. Welcome to learn, exchange and share, and make progress together!

Thank you so much for reading this, if this article has been helpful to you, please leave a like 👍 follow ❤️ share 👥 comment 💬 Thanks!!

May you go to your love!