快速上手 UniApp 开发器，文件上传不求人！

前端

2023-12-02 00:18:52

引言

UniApp 是一款跨平台开发框架，号称可以“一次编写，随处运行”，深受广大开发者的喜爱。最近，我公司要求我开发一个微信小程序，于是我便毫不犹豫地选择了 UniApp 进行开发。

然而，在开发过程中，我遇到了一个大坑：文件上传。

UniApp 官方提供了文件上传组件，但这个组件存在一个严重的 bug：无法上传大于 2M 的文件。我尝试了各种方法，但都无法解决这个 bug。无奈之下，我只能自己编写一个原生文件上传组件。

在本文中，我将分享我编写原生文件上传组件的经验，帮助读者快速上手 UniApp 开发器，轻松实现文件上传功能。

原生文件上传组件的实现

原生文件上传组件的实现主要分为两部分：

前端部分：负责选择文件和上传文件。
后端部分：负责接收文件和存储文件。

前端部分

前端部分的实现非常简单，只需要使用 HTML5 的 <input type="file"> 元素即可。

<input type="file" id="file-input">

当用户选择文件后，可以通过以下代码获取文件信息：

const file = document.getElementById('file-input').files[0];

然后，可以使用以下代码将文件上传到服务器：

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

fetch('http://example.com/upload', {
  method: 'POST',
  body: formData,
});

后端部分

后端部分的实现也非常简单，只需要使用 Node.js 的 multer 模块即可。

const multer = require('multer');

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({
    code: 0,
    data: {
      url: req.file.path,
    }
  });
});