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

Question

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

Answer 1

所需套餐

扑动面：

1. 迪奥
2. 文件选择器

节点侧：

1. 穆尔特

Flutter - 选择一个文件

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);
    }
}

Flutter - 发出 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 服务器 - 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 服务器 - 请求后处理程序

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