foreword

Hello everyone, today I will share with you how to upload files to achieve upload restrictions. When making projects, you will encounter functions that require uploading files, such as uploading pictures, uploading audio, uploading videos, and so on. But when you click Upload File to open the folder, there are many formats of pictures or audio in the folder. At this time, for convenience, you can restrict the file format and only display the file type to be uploaded. Let’s see how to realize this function.

1. Realize the effect

Because what I upload is audio, I set it to only display files in mp3 and m4a formats.
insert image description here

2. Realization

1. Ordinary verification of uploaded files

The code is as follows (example):

export function validUploadFile(type = 'img', file) {
    
    
  if (!file) {
    
    
    file = type;
    type = 'img'
  }
  const fileName = file.name;
  const m = fileName.match(/\.(\w+)(#|\?|$)/);
  const fileType = (m && m[1]).toString().toLowerCase();
  const allowHook = {
    
    
    video: ['mp4', 'ogv', 'ogg', 'webm'],
    audio: ['wav', 'mp3', 'ogg', 'acc', 'webm', 'amr'],
    file: ['doc', 'docx', 'xlsx', 'xls', 'pdf'],
    excel: ['xlsx', 'xls'],
    img: ['jpg', 'jpeg', 'png', 'gif']
  }
  const validType = (allowHook[type] || []).includes(fileType);
  if (!validType) {
    
    
    const supprtTypes = allowHook[type].join(',');
    return `只支持${
      
      supprtTypes}类型文件上传`;
  }
  if (fileName.indexOf('%') > -1 || fileName.indexOf('&') > -1) {
    
    
    return '上传文件名称不能带有字符"%","&"';
  }
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (type === file && !isLt10M) {
    
    
    this.$message.error('上传资料大小不能超过 10MB!');
    return false;
  }
  return '';
}

2. el-upload + accept restricts the uploaded file format

The code is as follows (example):
html:
The code below looks a lot, but the only sentence that is practical is **:accept="this.acceptFile('video')"** This is the method to limit the file type.

 <el-upload
        :accept="this.acceptFile('video')"
          :data="{savePath:'technology'}"
          :disabled="disabled"
          :multiple="isNewAdd"
          action="url"
          :rowIdex="rowIndex"
          :before-upload="handleBeforeUpload.bind(null, 'file')"
          :on-success="handleUploadSuccess.bind(null, rowIndex)"
          :on-remove="handleUploadRemove.bind(null, rowIndex)"
          :on-preview="handlePreview.bind(null, 'file')"
          :file-list="selectRow.fileList"
          :headers="{ Authorization: token }"
        >
        <el-button :disabled="disabled" type="primary">点击上传</el-button>
</el-upload>

The js is as follows:
The following code can be selected according to the files you upload, depending on whether you are uploading audio, video or pictures.

export function acceptFile(e) {
    
    
  const allowHook = {
    
    
    video: '.mp4, .ogv, .ogg, .webm',
    audio: '.wav, .mp3, .ogg, .acc, .webm, .amr',
    file: 'doc,.docx,.xlsx,.xls,.pdf',
    excel: 'xlsx,.xls',
    img: '.jpg, .jpeg, .png, .gif'
  }
  if (e) {
    
    
    return allowHook[e];
  }
  let srt = null
  for (const k in allowHook) {
    
    
    srt += allowHook[k]
  }
  return srt
}

You can set it according to the file format you upload, and get what you need from the code.

Summarize

This chapter mainly talks about a method of selecting a file format when uploading a file. It is for the convenience of developers and users to use and operate. Thank you for reading. I hope this chapter can help you.

File upload restrictions and element and element accept upload usage

Article directory