[英]Upload Image/File to Strapi (Flutter Web)
I'm trying to upload an image to Strapi through Flutter Web.我正在尝试通过 Flutter Web 将图像上传到 Strapi。 I'm aware (from this link ) that I need to use FormData to do so.
我知道(从此链接)我需要使用 FormData 来执行此操作。 I've researched on many ways to do this and I stumble across Dio and of course Http .
我研究了很多方法来做到这一点,我偶然发现了Dio ,当然还有Http 。
Both solutions gave me errors: Unsupported operation: MultipartFile is only supported where dart:io is available.
两种解决方案都给了我错误:
Unsupported operation: MultipartFile is only supported where dart:io is available.
I've tried this code:我试过这段代码:
var request = new http.MultipartRequest("POST", Uri.parse(url));
request.files.add(
await http.MultipartFile.fromPath(
"files",
imageFilePath,
),
);
request.send().then((response) {
if (response.statusCode == 200) print("Uploaded!");
print(response.statusCode);
}).catchError((e) => print(e));
And many other getting errors or Empty Data (400), when I use MultipartFile.fromBytes(...)
.当我使用
MultipartFile.fromBytes(...)
。
I'm just trying to upload a file, therefore I assume my body should only contain the FormData with as files
as it's mentioned on Strapi's Documentation .我只是想上传一个文件,因此我假设我的正文应该只包含带有 as
files
的 FormData,正如Strapi's Documentation中提到的那样。
So, I searched on the Flutter Discord for some help and I found out that my problem happens because Flutter Web can't use 'dart:io'
, and using 'dart:html'
takes away the use of all of Flutter's platforms. So, I searched on the Flutter Discord for some help and I found out that my problem happens because Flutter Web can't use
'dart:io'
, and using 'dart:html'
takes away the use of all of Flutter's platforms.
I ended up using this imports:我最终使用了这个进口:
import 'dart:convert';
import 'dart:typed_data';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';
import 'package:path/path.dart';
import 'package:async/async.dart';
and this is the function I created and worked:这是我创建和工作的 function:
Future<bool> uploadImage(
String imageFilePath,
Uint8List imageBytes,
) async {
String url = SERVERURL + "/uploadRoute";
PickedFile imageFile = PickedFile(imageFilePath);
var stream =
new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
var uri = Uri.parse(url);
int length = imageBytes.length;
var request = new http.MultipartRequest("POST", uri);
var multipartFile = new http.MultipartFile('files', stream, length,
filename: basename(imageFile.path),
contentType: MediaType('image', 'png'));
request.files.add(multipartFile);
var response = await request.send();
print(response.statusCode);
response.stream.transform(utf8.decoder).listen((value) {
print(value);
});
I had this issue using Strapi and this solution worked like a charm.我在使用Strapi时遇到了这个问题,这个解决方案就像一个魅力。
Upload file during entry creation with Flutter使用 Flutter 创建条目期间上传文件
dio: ^3.0.10
, mime: ^1.0.0
and http_parser
. dio: ^3.0.10
, mime: ^1.0.0
和http_parser
。
The main part is the key name of the file if it's foo
, so you have to change files.image
with files.foo
for file upload主要部分是文件的键名,如果它是
foo
,因此您必须将files.foo
更改为files.image
以进行文件上传
final mimeType = mime.lookupMimeType(imageFile.path, headerBytes: [0xFF, 0xD8])?.split('/');
FormData formData = new FormData.fromMap(
{
"files.image": await MultipartFile.fromFile(
imageFile.path,
filename: imageFile.path.split('/').last,
contentType: MediaType(mimeType?[0], mimeType?[1]),
),
"data": jsonEncode({
"title": title,
"summary": summary,
"content": content,
}),
},
);
Response response = await _dio.post(
"/blogs",
data: formData,
options: Options(),
);
In Flutter Web:在 Flutter Web 中:
I am using node.js with express as backend source I have created the following simple method to upload image and text data to localhost server using xamp我正在使用 node.js 和 express 作为后端源 我创建了以下简单的方法来使用xamp将图像和文本数据上传到localhost服务器
String url = 'http://localhost:8080/blog_upload';
var request = http.MultipartRequest('POST', Uri.parse(url));
imagebytes = await image.readAsBytes();
List<int> listData = imagebytes!.cast();
request.files.add(http.MultipartFile.fromBytes('field_name', listData ,
filename:'myFile.jpg'));
request.fields['name'] = 'Mehran Ullah Khan';
request.fields['country'] = 'Pakistan';
var response = await request.send();
I have used the following dependencies in the above method.我在上述方法中使用了以下依赖项。
http: ^0.13.3
image_picker: ^0.8.2
how we used the image_picker?我们如何使用 image_picker? first globally declare
image
and imagebytes
首先全局声明
image
和imagebytes
image = await ImagePicker().pickImage(source: ImageSource.gallery);
And this is the method in the backend I have used.这是我在后端使用的方法。
app.post('/blog_upload', upload.single('field_name'), async (req, res, next) => {
let data = {name_db: req.body['name'], Country_db:req.body['country'],};
let sqlq = `INSERT INTO TableName SET ? `;
db.query(sqlq, data, (insertionErr, insertionResult) => {
if (insertionErr) {
console.log('failed_upload');
throw insertionErr;
}
else {
console.log('done_upload');
res.send(insertionResult);
}
});
});
In the above method I have used multer and express
packages You can see full details for multer and express in this link在上述方法中,我使用
multer and express
包您可以在此链接中查看 multer 和 express 的完整详细信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.