如何将Uint8List图像转换为文件图像以在Flutter Web中上载 [英] How to convert Uint8List image to File Image for upload in flutter web
问题描述
我已经能够从计算机中选取文件并显示在我的Flutter Web应用程序中.我有一个函数(类型为 File
),该函数接收一个文件并将其上传到服务器.像这样 functionName(File imageToSend)
.
I have have been able to pick a file from my computer and display in my flutter web app.
I have a function(of type File
) which takes a file and uploads it to the server. like so functionName(File imageToSend)
.
但是当我尝试将此图像发送到服务器端时,它给了我一个错误.我正在使用以下代码进行上传:
But when I try to send this image to the sever side, it gives me an error. Am doing the upload using the code below:
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 = files [0];
中的> theChosenImg ,这也告诉我数据类型不匹配.
when I use the variable uploadedImage
the error is Expected a value of type 'File', but got one of type 'String'
then I decided to use theChosenImg
from theChosenImg = files[0];
, this also tell me that the datatypes mismatch.
是否可以将 Uint8List
数据类型转换为 File
?
Is it possible for me to convert the Uint8List
datatype to File
?
已更新代码
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);
},
),
],
),
],
),
),
);
}
}
带有发送图像的MEDTHOD的类
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(Uint8List uint8List);
这篇关于如何将Uint8List图像转换为文件图像以在Flutter Web中上载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!