为确保无忧文件上传，iview如何规范文件格式和限制文件大小？

2023-12-15 07:56:06

在 iView 中实现文件上传：文件格式和大小限制

前言

在现代网页开发中，文件上传已成为不可或缺的功能。为了确保文件上传顺利进行并符合业务需求，必须对上传的文件格式和大小进行限制。iView 作为一款功能强大的前端框架，提供了灵活的文件上传组件，但它没有内置文件格式和大小限制功能。本文将深入探讨如何通过自定义配置来实现这些限制。

基础配置

使用 iView 文件上传组件的基本配置如下：

<template>
  <div>
    <iview-upload
      :action="uploadUrl"
      :headers="headers"
      :multiple="false"
      :show-upload-list="false"
      :on-start="handleStart"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <i-button type="primary">上传文件</i-button>
    </iview-upload>
  </div>
</template>

<script>
import { Upload, Button } from 'iview'
export default {
  components: { IButton: Button, IUpload: Upload },
  data() {
    return {
      uploadUrl: '/api/file/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    handleStart(file) {
      console.log('文件开始上传:', file.name)
    },
    handleProgress({ percentage }) {
      console.log('文件上传进度:', percentage)
    },
    handleSuccess(res, file) {
      console.log('文件上传成功:', file.name)
    },
    handleError(err, file) {
      console.log('文件上传失败:', file.name)
    }
  }
}
</script>

<style>

</style>

此代码配置了文件上传的地址、请求头、是否允许多文件上传、是否显示上传列表，以及一系列事件监听器。

文件格式限制

为了限制文件格式，需要在 iView 的 before-upload 事件中检查上传的文件。如果文件扩展名不在允许的格式列表中，则阻止上传并提示用户。

import { Upload, Button } from 'iview'
export default {
  components: { IButton: Button, IUpload: Upload },
  data() {
    return {
      uploadUrl: '/api/file/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'], // 允许上传的文件格式列表
    }
  },
  methods: {
    handleStart(file) {
      if (!this.allowedFileTypes.includes(file.type)) {
        this.$Message.error('文件格式不正确')
        return false
      }
      console.log('文件开始上传:', file.name)
    },
    // ... 其他代码
  }
}

在 handleStart 方法中，检查文件类型是否在允许的列表中，如果不满足则阻止上传并提示用户。

文件大小限制

类似地，文件大小限制也可以通过在 before-upload 事件中检查上传文件的大小来实现。如果文件大小超过允许的最大值，则阻止上传并提示用户。

import { Upload, Button } from 'iview'
export default {
  components: { IButton: Button, IUpload: Upload },
  data() {
    return {
      uploadUrl: '/api/file/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      maxFileSize: 1024 * 1024, // 允许上传的文件最大大小（单位：字节）
    }
  },
  methods: {
    handleStart(file) {
      if (file.size > this.maxFileSize) {
        this.$Message.error('文件体积过大')
        return false
      }
      console.log('文件开始上传:', file.name)
    },
    // ... 其他代码
  }
}