目前學(xué)習(xí)flutter3中蛤售，使用的思路都是以前開發(fā)iOS的思路豌骏。
首先凭豪，使用dart:io啟動(dòng)HttpService，部署一個(gè)Html文件來(lái)作為其他設(shè)備訪問(wèn)的入口頁(yè)面。
import 'dart:io';
class HttpServiceLogic {
late HttpServer service;
// 啟動(dòng)服務(wù)
startService() async {
// 啟動(dòng) HttpService
service = await HttpServer.bind(InternetAddress.anyIPv4, 25210);
// 這種獲取方式不準(zhǔn) 只能獲取到0.0.0.0
print("服務(wù)器訪問(wèn)地址：${service.address.address}:25210");
// 監(jiān)聽所有Http請(qǐng)求
await service.forEach((HttpRequest request) async {
if (request.uri.path == '/') {
// 入口文件
request.response
..statusCode = HttpStatus.ok
..headers.contentType = ContentType.html
..write(await rootBundle.loadString('assets/www/index.html'))
..close();
} else {
// 其他請(qǐng)求都是404
request.response
..statusCode = HttpStatus.notFound
..close();
}
}
}
//關(guān)閉服務(wù)
closeService() {
service.close();
}
}
void main() async {
HttpServiceLogic().startService();
}
然后我用ai生成了一個(gè)簡(jiǎn)單的上傳頁(yè)面柑贞。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload TXT File</title>
<script>
function uploadFile() {
// 獲取文件輸入框的文件
var file = document.getElementById('fileInput').files[0];
// 創(chuàng)建FormData對(duì)象
var formData = new FormData();
formData.append('file', file);
// 創(chuàng)建AJAX請(qǐng)求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true); // 假設(shè)有一個(gè)服務(wù)端接口 /upload
xhr.onload = function() {
if (this.status === 200) {
console.log(this.responseText);
}
};
xhr.send(formData);
}
</script>
</head>
<body>
<input type="file" id="fileInput" accept=".txt" />
<button onclick="uploadFile()">Upload</button>
</body>
</html>
第二步定一個(gè)/upload接口來(lái)接收文件請(qǐng)求方椎，這邊使用 mime庫(kù)對(duì)multipart/form-data類型進(jìn)行解析。
import 'dart:io';
import 'package:mime/mime.dart';
class HttpServiceLogic {
startService() async {
// 啟動(dòng) HttpService
service = await HttpServer.bind(InternetAddress.anyIPv4, 25210);
// 這種獲取方式不準(zhǔn) 只能獲取到0.0.0.0 可以使用 network_info_plus 組件獲取當(dāng)前wifi ip
print("服務(wù)器訪問(wèn)地址：${service.address.address}:25210");
// 監(jiān)聽所有Http請(qǐng)求
await service.forEach((HttpRequest request) async {
if (request.uri.path == '/') {
...
} else if (request.uri.path == '/upload' && request.method.toUpperCase() == 'POST') {
// 上傳接口 這邊定義跟后端寫法差不多
if (request.headers.contentType?.mimeType == 'multipart/form-data') {
// 指定 multipart/form-data 傳輸二進(jìn)制類型
// 這里使用mime/mime.dart 的 MimeMultipartTransformer 解析二進(jìn)制數(shù)據(jù)
// 坑點(diǎn) 使用官方示例會(huì)報(bào)錯(cuò)钧嘶，然后調(diào)整以下
String boundary =
request.headers.contentType!.parameters['boundary']!;
// 然后處理HttpRequest流
await for (var multipart
in MimeMultipartTransformer(boundary).bind(request)) {
// 然后在body里面的 filename和field 都在 multipart.headers里面 然后文件流就是multipart本身
String? contentDisposition =
multipart.headers['content-disposition'];
String? filename = contentDisposition
?.split("; ")
.where((item) => item.startsWith("filename="))
.first
.replaceFirst("filename=", "")
.replaceAll('"', '');
// 我這邊指定txt文件棠众，否則跳過(guò)，如果不需要就略過(guò)
if (filename == null ||
filename.isEmpty ||
!filename.toLowerCase().endsWith('.txt')) {
continue;
}
String path = "自定文件路徑/$filename";
File file = File.fromUri(Uri.file(path));
await file.writeAsBytes(await multipart.toBytes());
// 可以做其他操作
}
// 這邊我直接成功有决，可以做其他判斷
request.response
..statusCode = HttpStatus.ok
..headers.contentType = ContentType.json
..write({"code": 1, "msg": "upload success"})
..close();
} else {
// 如果不是就報(bào)502
request.response
..statusCode = HttpStatus.badGateway
..writeln('Unsupported request')
..close();
}
} else {
...
}
}
}
...
}
最后吐槽一下摄欲。我這邊使用查了很多資料都沒(méi)有實(shí)現(xiàn)方案，包括去了pub那邊搜索庫(kù)的關(guān)鍵字multipart疮薇。這個(gè)庫(kù) multipart也是可以使用胸墙，但是轉(zhuǎn)流保存到本地文件會(huì)解析不出來(lái)。最后還是用ai幫我找到推薦的實(shí)現(xiàn)方案按咒，雖然他提供的代碼是不能運(yùn)行的迟隅，起碼推薦了mime這個(gè)庫(kù)。
