Flutter 如何将UINT8列表图像转换为文件图像以便在Flatter web中上载

我已经能够从我的电脑中选择一个文件并显示在我的Flitter web应用程序中。 我有一个函数（类型为

File

），它获取一个文件并将其上传到服务器。像这样

functionName（文件imageToSend）

但是当我尝试将此图像发送到服务器端时，它会给我一个错误。我正在使用以下代码进行上传：

Uint8List uploadedImage;
File theChosenImg;
FileReader reader =  FileReader();
FileReader reader2 = FileReader();

filePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();


uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files.length == 1) {
    final file = files[0];    

    reader.onLoadEnd.listen((e) {
                setState(() {
                  uploadedImage = reader.result;
                  theChosenImg = files[0];
                });
    });
    reader.readAsArrayBuffer(file);
    reader2.readAsDataUrl(file);
  }
});
}

当我使用变量

uploadedImage

时，错误是

预期值为'File'类型，但得到了'String'类型的值

，然后我决定使用

theChosenImg

from

theChosenImg=files[0]，这也告诉我数据类型不匹配

我是否可以将
uint8列表
数据类型转换为
文件

用代码更新

import 'dart:typed_data';
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:web_image_upload/impUp.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class FrontUi extends StatefulWidget {
  @override
  _FrontUiState createState() => _FrontUiState();
}

class _FrontUiState extends State<FrontUi> {

Uint8List uploadedImage;
File theChosenImg;
String dispText = 'Uploaded image should shwo here.';
FileReader reader2 = FileReader();

_startFilePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();


uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files.length == 1) {
    final file = files[0];
    FileReader reader =  FileReader();

    reader.onLoadEnd.listen((e) {
                setState(() {
                  uploadedImage = reader.result;
                  theChosenImg = files[0];
                });
    });
    reader.readAsArrayBuffer(file);
    reader2.readAsDataUrl(file);
  }
});
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView(
          children: <Widget>[
            Column(
              children: <Widget>[
                SizedBox(
                  height: 30,
                ),
                Container(
                  height: 500,
                  width: 800,
                  child: Center(
                    child: uploadedImage == null
                ? Container(
                    child: Text(dispText),
                  )
                : Container(
                    child: Image.memory(uploadedImage),
                  ),
                  ),
                ),
            SizedBox(height: 20,),                
                CupertinoButton(
                  color: Colors.green,
                  child: Text("Choose"),
                  onPressed: (){
                    _startFilePicker();
                  },
                ),

            SizedBox(height: 50,),
             CupertinoButton(
              color: Colors.green,
              child: Text("Upload"),
              onPressed: (){
                PhotoCls().upload(reader2.result);
              },
            ),



              ],
            ),



          ],
        ),
      ),

    );
  }
}

import 'dart:io';
import 'package:path/path.dart';
import 'package:async/async.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';



  class PhotoCls {
 String phpEndPoint = "http://IPv4 address/testlocalhost/uploadPicture.php";


upload(File imageFile) async {    
      // open a bytestream
      var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
      // get file length
      var length = await imageFile.length();

      // string to uri
      var uri = Uri.parse(phpEndPoint);

      // create multipart request
      var request = new http.MultipartRequest("POST", uri);

      // multipart that takes file
      var multipartFile = new http.MultipartFile('file', stream, length,
          filename: basename(imageFile.path));

      // add file to multipart
      request.files.add(multipartFile);

      // send
      var response = await request.send();
      print(response.statusCode);

      // listen for response
      response.stream.transform(utf8.decoder).listen((value) {
        print(value);
      });
    }



  }

我试图生成一个可以同时支持设备和网络的代码

因为File.fromRawPath（）使用了dart:io，它不适用于web

这是我的解决方案：

Uint8List imageCroppedBytes;

首先，我选择了我的图像，然后被裁剪

在裁剪后的代码中的某个地方，我将裁剪后的字节文件编码为jpg

imageCroppedBytes = Image.encodeJpg(src , quality: 80);

然后：

var image = http.MultipartFile.fromBytes('image', imageCroppedBytes ,filename: 'profileImage.jpg');
request.files.add(image);
await request.send().then((value) async {
    if(value.statusCode == 200) {
      Do Something ...
    }
});

在我的例子中，我有一个NodeJs来获取文件并保存它

编辑：

import 'package:image/image.dart' as Image;

更多帮助代码：

var data = editorKey.currentState.rawImageData;
Image.Image src = Image.decodeImage(data);
src = Image.copyCrop(src, cropRect.left.toInt(), cropRect.top.toInt(),
                          cropRect.width.toInt(), cropRect.height.toInt());
if(src.width > 300) {
src = Image.copyResize(src,width: 300 , height: 300);
}
setState(() {
   imageCroppedBytes = Image.encodeJpg(src , quality: 80);
   imagePicked = false;
   imageCropped = true;
});

你可以发布你的文件上传代码吗。。！与您的导入语句一起使用。@AbhilashChandran已用代码更新我确信您不能在
flatter\u web
的上下文中使用
dart:io
库。尝试使用
dart:html
中的文件类。
FileUploadInputElement
返回的文件对象属于
dart:html
library中的类型。网站不支持dart io您是否有可用的存储库？这个答案是稀疏的，并且考虑到还有一些应用程序还没有迁移到空安全性，您可能需要放置一些指向存储库或文档的引用链接。我知道这个答案对我有用，但我无法找到.encodeJpg函数的位置，因为它不属于ImagePicker、Image或ExtendedImage。谢谢你的帮助！亲爱的@rshrc事实上，我没有任何关于此的开放存储库，但我会编辑更多帮助，非常感谢！！
var data = editorKey.currentState.rawImageData;
Image.Image src = Image.decodeImage(data);
src = Image.copyCrop(src, cropRect.left.toInt(), cropRect.top.toInt(),
                          cropRect.width.toInt(), cropRect.height.toInt());
if(src.width > 300) {
src = Image.copyResize(src,width: 300 , height: 300);
}
setState(() {
   imageCroppedBytes = Image.encodeJpg(src , quality: 80);
   imagePicked = false;
   imageCropped = true;
});