前端限制上传图片的大小和类型-CFANZ编程社区

在前端实现上传图片功能时，限制上传图片的大小和类型是很常见的需求，下面分别从使用原生 JavaScript 和使用一些前端框架（如 Vue.js）的角度来介绍具体实现方法。

原生 JavaScript 实现

限制图片类型

可以通过 <input type="file"> 的 accept 属性来初步限制用户能选择的文件类型，不过该属性只是一个提示，用户仍可绕过。因此，还需要在 JavaScript 代码中进一步验证。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>限制图片类型和大小</title>
</head>

<body>
    <input type="file" id="imageInput" accept="image/jpeg,image/png">
    <button id="uploadButton">上传</button>
    <div id="status"></div>

    <script>
        const imageInput = document.getElementById('imageInput');
        const uploadButton = document.getElementById('uploadButton');
        const status = document.getElementById('status');

        uploadButton.addEventListener('click', function () {
            const file = imageInput.files[0];
            if (file) {
                // 验证图片类型
                const allowedTypes = ['image/jpeg', 'image/png'];
                if (!allowedTypes.includes(file.type)) {
                    status.textContent = '只允许上传 JPEG 或 PNG 格式的图片';
                    return;
                }

                // 这里可以继续添加图片大小的验证逻辑
                // 假设限制图片大小为 2MB
                const maxSize = 2 * 1024 * 1024; // 2MB
                if (file.size > maxSize) {
                    status.textContent = '图片大小不能超过 2MB';
                    return;
                }

                // 若验证通过，可进行上传操作
                // 这里省略具体上传代码，可参考前面上传图片的示例
                status.textContent = '图片验证通过，准备上传...';
            }
        });
    </script>
</body>

</html>

代码解释

accept="image/jpeg,image/png"：在 HTML 层面提示用户只能选择 JPEG 或 PNG 格式的图片。
allowedTypes.includes(file.type)：在 JavaScript 中进一步验证所选文件的类型是否符合要求。
file.size > maxSize：验证图片大小是否超过限制，maxSize 表示允许的最大文件大小（这里设置为 2MB）。

Vue.js 实现

限制图片类型和大小

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/jpeg,image/png">
    <button @click="uploadImage">上传</button>
    <p>{{ status }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      status: ''
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadImage() {
      if (this.selectedFile) {
        // 验证图片类型
        const allowedTypes = ['image/jpeg', 'image/png'];
        if (!allowedTypes.includes(this.selectedFile.type)) {
          this.status = '只允许上传 JPEG 或 PNG 格式的图片';
          return;
        }

        // 验证图片大小
        const maxSize = 2 * 1024 * 1024; // 2MB
        if (this.selectedFile.size > maxSize) {
          this.status = '图片大小不能超过 2MB';
          return;
        }

        // 若验证通过，可进行上传操作
        // 这里省略具体上传代码，可使用 axios 等库发送请求
        this.status = '图片验证通过，准备上传...';
      }
    }
  }
};
</script>

代码解释

@change="handleFileChange"：监听文件选择事件，将所选文件存储在 selectedFile 变量中。
@click="uploadImage"：点击上传按钮时调用 uploadImage 方法进行图片类型和大小的验证。
在 uploadImage 方法中，通过 includes 方法验证图片类型，通过比较 size 属性验证图片大小。

无论是原生 JavaScript 还是 Vue.js 实现，核心思路都是先在 HTML 层面给出提示，再在代码中进行严格验证，确保上传的图片符合要求。