Flutter Web 应用程序使用 ResumableJS 库将文件上传到服务器。是的,这不是最简单的解决方案,但它是必要的。当您选择一个文件(通常是一个图像)时,您必须在发送它之前在应用程序界面中显示它。但是,我无法在 Flutter 代码中获取图像文件本身,我不明白如何将其从库方法中提取出来并将其转换为任何合适格式的文件。这是我的 index.html 中的代码
<script src="https://cdn.jsdelivr.net/npm/resumablejs@1.1.0/resumable.min.js"></script>
<script>
var apiUrl = "https://**********/api/";
var progressBar = 0;
var photoDescriptionUrl1 = "";
var photoDescriptionUrl2 = "";
var photoDescriptionUrl3 = "";
var photoDescriptionUrl4 = "";
var photoDescriptionUrl5 = "";
var photoDescriptionUrl6 = "";
var productPromoPictureURL = "";
var productMiniPromoPictureURL = "";
var productLogoURL = "";
var nowUploading = [];
//****** event for uploading **************
document.addEventListener("uploadFile", function (event) {
console.log("upload file ---- ", event.detail);
initResumable(
event.detail.fieldName,
event.detail.userId,
event.detail.fileType
);
});
function initResumable(fieldName, userId, fileType) {
var uploader = new Resumable({
target: `${apiUrl}product/upload/${userId}`,
chunkSize: 0.5 * 1024 * 1024,
testChunks: false,
prioritizeFirstAndLastChunk: true,
maxFiles: 1,
});
uploader.opts.fileType = fileType;
uploader.assignBrowse(document.getElementById(fieldName));
uploader.on("fileAdded", (file, event) => {
nowUploading.push(file.uniqueIdentifier);
console.log("upload now...");
uploader.upload();
var event = new CustomEvent("uploadedFile", {
detail: {
file: file.file,
},
});
console.log("file---", file);
document.dispatchEvent(event);
});
uploader.on("fileSuccess", (file, message) => {
console.log("uploaded ok", file, "for", fieldName);
if (fieldName === "photoDescriptionUrl1R") {
photoDescriptionUrl1 = file.fileName;
} else if (fieldName === "photoDescriptionUrl2R") {
photoDescriptionUrl2 = file.fileName;
} else if (fieldName === "photoDescriptionUrl3R") {
photoDescriptionUrl3 = file.fileName;
} else if (fieldName === "photoDescriptionUrl4R") {
photoDescriptionUrl4 = file.fileName;
} else if (fieldName === "photoDescriptionUrl5R") {
photoDescriptionUrl5 = file.fileName;
} else if (fieldName === "photoDescriptionUrl6R") {
photoDescriptionUrl6 = file.fileName;
} else if (fieldName === "productLogoURL") {
productLogoURL = file.fileName;
} else if (fieldName === "productLauncherFileUrl") {
} else if (fieldName === "productPromoPictureURL") {
productPromoPictureURL = file.fileName;
} else if (fieldName === "productLauncherFileUrl") {
} else if (fieldName === "productMiniPromoPictureURL") {
productMiniPromoPictureURL = file.fileName;
} else if (fieldName === "productLauncherFileUrl") {
this.form.productLauncher.get(fieldName).setValue(file.fileName);
} else {
this.form.setValue(file.fileName);
}
console.log("file URL is", file.fileName);
return file.fileName;
});
uploader.on("pause", (file, message) => {
console.log("pause", file, message);
});
uploader.on("fileProgress", (file, message) => {
progressBar = uploader.progress();
console.log("fileProgress", this.progressBar);
});
uploader.on("fileError", (file, message) => {
console.log("fileError", file, message);
});
}
</script>
我想提请您注意,文件下载本身运行良好,没有问题和失败。这就是我在 dart 代码中使用库以获取 fileAdded 事件的方式:
html.document.on["uploadedFile"].listen((html.Event event) {
var res = (event as html.CustomEvent).detail;
var res1 = Map.from(res);
var reet = res1.values.first;
final reader = html.FileReader();
reader.readAsText(reet);
setState(() {
image = Image.memory(reet);
});
print(res1.toString());
});
我的问题是我无法从响应中提取文件并将其转换为小部件所需的格式。给出错误信息
Uncaught Error: Expected a value of type 'Uint8List', but got one of type 'File$
请告诉我,我该怎么做?
Image.memory();接受Uint8List(字节)并传输File(文件系统中文件的链接)。从理论上讲,它应该适合您Image.file();,但我不确定收到的File...这是我的解决方案,我确实错误地使用了 FileReader: