前端上传拦截js代码

前端上传拦截通常指的是在用户通过前端界面上传文件之前，通过JavaScript对上传的内容进行检查和处理。这种拦截可以用于多种目的，比如验证上传文件的类型、大小，或者是对文件内容进行预处理等。

下面是一个简单的前端上传拦截的JavaScript代码示例，它使用了HTML的`<input type="file">`元素来让用户选择文件，并在文件被实际上传到服务器之前进行拦截处理：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const fileSize = file.size; // 获取文件大小
        const fileType = file.type; // 获取文件类型

        // 检查文件大小是否超出限制
        if (fileSize > 1024 * 1024 * 5) { // 假设限制为5MB
            alert('文件大小不能超过5MB');
            return;
        }

        // 检查文件类型是否符合要求
        const allowedTypes = ['image/png', 'image/jpeg', 'image/gif']; // 允许的文件类型
        if (allowedTypes.indexOf(fileType) === -1) {
            alert('只允许上传图片文件');
            return;
        }

        // 文件通过验证，可以进行上传操作
        // 这里可以使用axios、fetch等进行文件的上传
        // 例如使用XMLHttpRequest或FormData进行文件的上传
        const formData = new FormData();
        formData.append('file', file);

        // 使用fetch API发送文件
        fetch('upload.php', {
            method: 'POST',
            body: formData
        }).then(response => response.json())
          .then(data => {
              console.log(data);
          })
          .catch(error => {
              console.error(error);
          });
    }
});

HTML代码部分：

<input type="file" id="fileInput" />

在这个例子中，我们通过监听文件输入元素的`change`事件来获取用户选择的文件。然后我们检查文件大小和类型是否满足我们的预设条件。如果文件通过了所有的检查，我们就可以使用`fetch` API将文件上传到服务器。