从 Flutter Web 上传文件到 Node.js / Express.js 服务器答案

【问题标题】：Upload File from Flutter Web to Node.js / Express.js Server从 Flutter Web 上传文件到 Node.js / Express.js 服务器
【发布时间】：2022-06-22 15:18:00
【问题描述】：

我正在开发一个 Flutter web 项目，而 FilePicker 在 Flutter web 上将路径返回为 null，那么如何创建一个可以发送到 Multipart 以将其发送到 Node.js 或 Express.js 服务器的文件？

【问题讨论】：

标签： flutter http file-upload flutter-web dio

【解决方案1】：

需要的包

颤抖的一面：

NODEJS 端：

Multer

颤动 - 选择文件

test() async {
    // * Pick a File
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      // * cast it to bytes
      List<int> bytes = result.files.single.bytes!.cast();
      // * Get its name, will use it later.
      var name = result.files.single.name;
      // * Send it to method that will make HTTP request.
      _projectProvider.test(bytes, name);
    }
}

颤动 - 发出 HTTP 请求

import 'dart:developer';
// ignore: depend_on_referenced_packages
import 'package:http_parser/http_parser.dart';

import 'package:dio/dio.dart';

class ProjectProvider {
  // * constructor
  ProjectProvider() : _dio = Dio();

  // * dio
  late Response _response;
  late final Dio _dio;

  // * rest api
  final _baseUrl = "http://127.0.0.1:3000";

  test(List<int> bytes, String name) async {
    String extension = name.split(".").last;

    var formData = FormData.fromMap({
      "file": MultipartFile.fromBytes(
        bytes,
        filename: name,
        contentType: MediaType("File", extension),
      ),
    });

    _response = await _dio.post("$_baseUrl/test", data: formData);

    log("test response");
    log(_response.data.toString());
  }
}

NODEJS SERVER - MULTER 存储设置

const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./files/");
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    let originalName = file.originalname;
    let extension = originalName.split(".")[1];
    cb(null, file.fieldname + "-" + uniqueSuffix + "." + extension);
  },
});

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

NODEJS 服务器 - POST 请求处理程序

app.route("/test").post(upload.single("file"), function (req, res) {
    res.send(req.file);
});

【讨论】：