如何有选择地将图像上传到数据库/存储? [英] How do I optionally upload images to my database/storage?
本文介绍了如何有选择地将图像上传到数据库/存储?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这里，我希望用户能够上传最多 5张图片.但是，当一个人上传的图片少于5张时，它会冻结该应用程序，而根本不会上传该文档.
Here I want the user to be able to upload up to 5 images. But when one uploads less than 5 images it freezes the app and does not upload the document at all.
class ItemInput extends StatefulWidget {
@override
_ItemInputState createState() => _ItemInputState();
}
class _ItemInputState extends State<ItemInput> {
final Firestore database = Firestore.instance;
//CollectionReference products = Firestore.instance.collection('products');
TextEditingController nameText = TextEditingController();
TextEditingController priceText = TextEditingController();
TextEditingController cellNoText = TextEditingController();
TextEditingController addText = TextEditingController();
TextEditingController detailText = TextEditingController();
TextEditingController pic = TextEditingController();
final _formKey = GlobalKey<FormState>();
File _image1;
File _image2;
File _image3;
File _image4;
File _image5;
static const menuItems = <String>[
'Car/موتر',
'motorcycle/ موترسایکل',
'electronics/الکترونیک',
'house/ خانه',
'household/لوازم خانه',
'mobile/موبایل',
'Sellect Category/انتخاب بخش',
];
final List<DropdownMenuItem<String>> _dropDownMenuItems = menuItems
.map((String value) => DropdownMenuItem<String>(
value: value,
child: Text(value),
))
.toList();
String _btnselected = "Sellect Category/انتخاب بخش";
Future getImage1() async {
var firstImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image1 = firstImage;
});
}
Future getImage2() async {
var secondImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image2 = secondImage;
});
}
Future getImage3() async {
var thirdImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image3 = thirdImage;
});
}
Future getImage4() async {
var forthImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image4 = forthImage;
});
}
Future getImage5() async {
var fifthImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image5 = fifthImage;
});
}
var imageUrl1;
var imageUrl2;
var imageUrl3;
var imageUrl4;
var imageUrl5;
FirebaseStorage storage = FirebaseStorage.instance;
uploadPic() async {
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image1);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl1 = url;
return url;
}
/////2
uploadPic2() async {
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image2);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl2 = url;
return url;
}
////3
uploadPic3() async {
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image3);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl3 = url;
return url;
}
///4
uploadPic4() async {
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image4);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl4 = url;
return url;
}
///5
uploadPic5() async {
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image5);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl5 = url;
return url;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Put AD'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: nameText,
decoration: const InputDecoration(
icon: const Icon(Icons.directions_car),
hintText: 'Corolla, Mercedes...',
labelText: 'Item Name - نام جنس',
),
),
SizedBox(height: 10),
TextFormField(
controller: detailText,
decoration: const InputDecoration(
icon: const Icon(Icons.description),
hintText: 'Description - مشخصات',
labelText: 'Description - مشخصات',
),
),
SizedBox(height: 10),
TextFormField(
controller: priceText,
decoration: const InputDecoration(
icon: const Icon(Icons.attach_money),
hintText: 'Enter your item\'s price',
labelText: 'Price - قیمت',
),
),
SizedBox(height: 10),
TextFormField(
controller: cellNoText,
decoration: const InputDecoration(
icon: const Icon(Icons.call),
hintText: '0700-000-000',
labelText: 'Mobile Number - شماره تماس',
),
),
SizedBox(height: 10),
TextFormField(
controller: addText,
decoration: const InputDecoration(
icon: const Icon(Icons.location_city),
hintText: 'Enter Your Address',
labelText: 'Address - آدرس',
),
),
SizedBox(height: 30),
Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
//////// dropdown start //////////
DropdownButton(
hint: Text('Sellect Category'),
value: _btnselected,
items: this._dropDownMenuItems,
onChanged: (String newvalue) {
setState(() {
_btnselected = newvalue;
});
},
),
/////// dropdown end //////
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () async {
await getImage1();
},
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
height: 60,
width: 60,
child: (_image1 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image1,
fit: BoxFit.cover,
)
),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
await getImage2();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image2 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image2,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
await getImage3();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image3 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image3,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
await getImage4();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image4 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image4,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
await getImage5();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image5 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image5,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
],
),
SizedBox(
height: 10,
),
RaisedButton.icon(
color: Colors.teal,
onPressed: () async {
Navigator.pop(
context,
);
switch (_btnselected) {
case 'Car/موتر':
database.collection("car").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url":
(await uploadPic() != null)
? await uploadPic()
: "null",
"image 2 Url":
(await uploadPic2() != null)
? await uploadPic2()
: "null",
"image 3 Url":
(await uploadPic3() != null)
? await uploadPic3()
: "null",
"image 4 Url":
(await uploadPic4() != null)
? await uploadPic4()
: "null",
"image 5 Url":
(await uploadPic5() != null)
? await uploadPic5()
: "null",
});
break;
}
(_image1 != null)
? uploadPic().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 1 Url": value},
merge: true);
})
: print("no images");
//2
(_image2 != null)
? uploadPic2().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 2 Url": value},
merge: true);
})
: print("no image");
///3
(_image3 != null)
? uploadPic3().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 3 Url": value},
merge: true);
})
: print('no image');
///4
(_image4 != null)
? uploadPic4().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 4 Url": value},
merge: true);
})
: print('no image');
///5
(_image5 != null)
? uploadPic5().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 5 Url": value},
merge: true);
})
: print('npo image');
},
icon: Icon(
Icons.send,
size: 25,
color: Colors.white,
),
label: Text(
'Submit - برو',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
))
],
),
),
],
),
),
),
),
),
));
}
}
这里是所有用于接受用户输入的代码，我已经删除了import语句和其他一些无用的东西，以使您看起来更干净，以便能够更好地阅读代码.我希望有人会发现缺陷.如何一次上传少于5张图片?
Here is all of the code for taking input from user, i have deleted the import statements and some other useless stuff to make it clean for you guys to be able to read the code better. i hope somebody will find the flaw. How can I upload less than 5 images at a time?
推荐答案
这就是您的操作方式.感谢@Niteesh
this is how you do it . thanks to @Niteesh
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/rendering.dart';
import 'dart:io';
import 'package:path/path.dart' as path;
import 'package:image_picker/image_picker.dart';
class ItemInput extends StatefulWidget {
@override
_ItemInputState createState() => _ItemInputState();
}
class _ItemInputState extends State<ItemInput> {
final Firestore database = Firestore.instance;
//CollectionReference products = Firestore.instance.collection('products');
TextEditingController nameText = TextEditingController();
TextEditingController priceText = TextEditingController();
TextEditingController cellNoText = TextEditingController();
TextEditingController addText = TextEditingController();
TextEditingController detailText = TextEditingController();
TextEditingController pic = TextEditingController();
final _formKey = GlobalKey<FormState>();
File _image1;
File _image2;
File _image3;
File _image4;
File _image5;
//String nall;
static const menuItems = <String>[
'Car/موتر',
'motorcycle/ موترسایکل',
'electronics/الکترونیک',
'house/ خانه',
'household/لوازم خانه',
'mobile/موبایل',
'Sellect Category/انتخاب بخش',
];
final List<DropdownMenuItem<String>> _dropDownMenuItems = menuItems
.map((String value) => DropdownMenuItem<String>(
value: value,
child: Text(value),
))
.toList();
String _btnselected = "Sellect Category/انتخاب بخش";
Future getImage1() async {
var firstImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image1 = firstImage;
});
}
Future getImage2() async {
var secondImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image2 = secondImage;
});
}
Future getImage3() async {
var thirdImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image3 = thirdImage;
});
}
Future getImage4() async {
var forthImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image4 = forthImage;
});
}
Future getImage5() async {
var fifthImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image5 = fifthImage;
});
}
String imageUrl1;
String imageUrl2;
String imageUrl3;
String imageUrl4;
String imageUrl5;
FirebaseStorage storage = FirebaseStorage.instance;
uploadPic() async {
//String fileName = path.basename(_image1.path);
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image1);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl1 = url;
return url;
}
/////2
uploadPic2() async {
//String fileName = path.basename(_image2.path);
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image2);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl2 = url;
return url;
}
////3
uploadPic3() async {
//String fileName = path.basename(_image3.path);
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image3);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl3 = url;
return url;
}
///4
uploadPic4() async {
// String fileName = path.basename(_image4.path);
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image4);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl4 = url;
return url;
}
///5
uploadPic5() async {
//String fileName = path.basename(_image5.path);
StorageReference reference = storage.ref().child("images");
StorageUploadTask uploadTask = reference.putFile(_image5);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
String url = await taskSnapshot.ref.getDownloadURL();
imageUrl5 = url;
return url;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Put AD'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: nameText,
decoration: const InputDecoration(
icon: const Icon(Icons.directions_car),
hintText: 'Corolla, Mercedes...',
labelText: 'Item Name - نام جنس',
),
),
SizedBox(height: 10),
TextFormField(
controller: detailText,
decoration: const InputDecoration(
icon: const Icon(Icons.description),
hintText: 'Description - مشخصات',
labelText: 'Description - مشخصات',
),
),
SizedBox(height: 10),
TextFormField(
controller: priceText,
decoration: const InputDecoration(
icon: const Icon(Icons.attach_money),
hintText: 'Enter your item\'s price',
labelText: 'Price - قیمت',
),
),
SizedBox(height: 10),
TextFormField(
controller: cellNoText,
decoration: const InputDecoration(
icon: const Icon(Icons.call),
hintText: '0700-000-000',
labelText: 'Mobile Number - شماره تماس',
),
),
SizedBox(height: 10),
TextFormField(
controller: addText,
decoration: const InputDecoration(
icon: const Icon(Icons.location_city),
hintText: 'Enter Your Address',
labelText: 'Address - آدرس',
),
),
SizedBox(height: 30),
Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
//////// dropdown start //////////
DropdownButton(
hint: Text('Sellect Category'),
value: _btnselected,
items: this._dropDownMenuItems,
onChanged: (String newvalue) {
setState(() {
_btnselected = newvalue;
});
},
),
/////// dropdown end //////
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () async {
//image.getImage(source: ImageSource.gallery);
await getImage1();
},
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
height: 60,
width: 60,
child: (_image1 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image1,
fit: BoxFit.cover,
)
// : Icon(Icons.add_a_photo, size: 30),
),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
// image.getImage(source: ImageSource.gallery);
await getImage2();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image2 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image2,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
// image.getImage(source: ImageSource.gallery);
await getImage3();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image3 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image3,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
// image.getImage(source: ImageSource.gallery);
await getImage4();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image4 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image4,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
InkWell(
onTap: () async {
// image.getImage(source: ImageSource.gallery);
await getImage5();
},
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius:
BorderRadius.circular(10)),
child: (_image5 == null)
? Icon(Icons.add_a_photo, size: 30)
: Image.file(
_image5,
fit: BoxFit.fill,
)),
),
SizedBox(width: 5),
],
),
SizedBox(
height: 10,
),
RaisedButton.icon(
color: Colors.teal,
onPressed: () async {
Navigator.pop(
context,
);
switch (_btnselected) {
case 'Car/موتر':
database.collection("car").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url":
(_image1 != null)
? await uploadPic()
: null,
"image 2 Url":
(_image2 != null)
? await uploadPic2()
: null,
"image 3 Url":
(_image3 != null)
? await uploadPic3()
: null,
"image 4 Url":
(_image4 != null)
? await uploadPic4()
: null,
"image 5 Url":
(_image5 != null)
? await uploadPic5()
: null,
});
break;
case 'motorcycle/ موترسایکل':
database.collection("motorcycle").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url": _image1 != null ? _image1.path : null,
"image 2 Url": _image2 != null ? _image2.path : null,
"image 3 Url": _image3 != null ? _image3.path : null,
"image 4 Url": _image4 != null ? _image4.path : null,
"image 5 Url": _image5 != null ? _image5.path : null,
});
break;
case 'electronics/الکترونیک':
database.collection("electronics").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url": _image1 != null ? _image1.path : null,
"image 2 Url": _image2 != null ? _image2.path : null,
"image 3 Url": _image3 != null ? _image3.path : null,
"image 4 Url": _image4 != null ? _image4.path : null,
"image 5 Url": _image5 != null ? _image5.path : null,
});
break;
case 'house/ خانه':
database.collection("house").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url": _image1 != null ? _image1.path : null,
"image 2 Url": _image2 != null ? _image2.path : null,
"image 3 Url": _image3 != null ? _image3.path : null,
"image 4 Url": _image4 != null ? _image4.path : null,
"image 5 Url": _image5 != null ? _image5.path : null,
});
break;
case 'household/لوازم خانه':
database.collection("household").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url": _image1 != null ? _image1.path : null,
"image 2 Url": _image2 != null ? _image2.path : null,
"image 3 Url": _image3 != null ? _image3.path : null,
"image 4 Url": _image4 != null ? _image4.path : null,
"image 5 Url": _image5 != null ? _image5.path : null,
});
break;
case 'mobile/موبایل':
database.collection("mobile").add({
"item Name": nameText.text,
"item Desc": detailText.text,
"item Price": priceText.text,
"seller Number": cellNoText.text,
"seller add": addText.text,
"image 1 Url": _image1 != null ? _image1.path : null,
"image 2 Url": _image2 != null ? _image2.path : null,
"image 3 Url": _image3 != null ? _image3.path : null,
"image 4 Url": _image4 != null ? _image4.path : null,
"image 5 Url": _image5 != null ? _image5.path : null,
});
break;
}
if(_image1 != null)
uploadPic().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 1 Url": value},
merge: true);
});
//2
if(_image2 != null)
uploadPic2().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 2 Url": value},
merge: true);
});
//3
if(_image3 != null)
uploadPic3().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 3 Url": value},
merge: true);
});
//4
if(_image4 != null)
uploadPic4().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 4 Url": value},
merge: true);
});
//5
if(_image5 != null)
uploadPic5().then((value) {
DocumentReference docRef = Firestore
.instance
.collection("carPics")
.document();
docRef.setData({"image 5 Url": value},
merge: true);
});
},
icon: Icon(
Icons.send,
size: 25,
color: Colors.white,
),
label: Text(
'Submit - برو',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
))
],
),
),
],
),
),
),
),
),
));
}
}
这篇关于如何有选择地将图像上传到数据库/存储?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
