将文件从Flutter Web上传到node.js / express.js服务器

Question

我正在研究一个flutter Web项目，FilePicker将路径返回flutter Web上的null，那么如何创建一个可以发送到Multipart将其发送到Node.js或Express.js Server的文件？

Answer 1

需要

flutter侧：

1. dio
2. =“ https://pub.dev/packages/file_picker” rel =“ noreferrer”> pifer picker

nodejs side：

1. multer

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 request

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

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