Node 文件上传手把手带你搞定

2023-09-05 10:20:30

使用 Node.js 简明易懂地掌握文件上传

文件上传是网络开发中至关重要的功能，无论是上传用户头像、文档还是视频。掌握文件上传的技巧可以极大地提高开发效率。在这篇全面的指南中，我们将深入探讨如何使用 Node.js 实现文件上传，从使用 Element-UI 库到解决常见的挑战，如二进制文件转换。

使用 Element-UI 库简化文件上传

Element-UI 是一个流行的前端框架，提供了一系列实用组件，其中包括 el-upload 组件。它简化了文件上传过程，只需几行代码即可实现。

安装 Element-UI： 使用 npm 命令 npm install element-ui -S 安装 Element-UI。
引入 el-upload 组件： 在你的 JavaScript 文件中，使用 import { ElUpload } from 'element-ui' 引入 el-upload 组件。然后将其注册为 Vue.js 组件：Vue.component('el-upload', ElUpload)。
使用 el-upload 组件： 在你的模板中，使用以下代码添加 el-upload 组件：

<el-upload
  action="http://localhost:3000/upload"
  on-success="handleSuccess"
  on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或点击上传</div>
  <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

使用 FormData 解决文件转换问题

在使用 el-upload 组件上传文件时，您可能会遇到一个问题：无法直接将文件对象上传到服务器。这是因为服务器只能接收字符串或 JSON 数据，而文件对象是二进制数据。

为了解决这个问题，可以使用 FormData 对象。FormData 对象可以将文件对象转换为二进制数据，然后将其发送到服务器。

使用 FormData 对象的代码示例如下：

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData
})
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });