基于Flutter实现图片选择和图片上传

final List<AssetEntity> assets = await AssetPicker.pickAssets(context);

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>获取图片及使用相册拍照以便上传动态图片。</string>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION"/>

static Widget imagePicker(
  String fORMKey,
  ValueChanged<String> onTapped, {
  File imageFile,
  String imageUrl,
  double width = 80.0,
  double height = 80.0,
}) {
  return GestureDetector(
    child: Container(
      margin: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.grey[300],
        border: Border.all(width: 0.5, style: BorderStyle.solid),
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
      ),
      child: _getImageWidget(imageFile, imageUrl, width, height),
      width: width,
      height: height,
    ),
    onTap: () {
      onTapped();
    },
  );
}

static Widget _getImageWidget(
    File imageFile, String imageUrl, double width, double height) {
  if (imageFile != null) {
    return Image.file(
      imageFile,
      fit: BoxFit.cover,
      width: width,
      height: height,
    );
  }
  if (imageUrl != null) {
    return CachedNetworkImage(
      imageUrl: imageUrl,
      fit: BoxFit.cover,
      width: width,
      height: height,
    );
  }

  return Icon(Icons.add_photo_alternate);
}

List<Widget> _getForm(BuildContext context) {
  List<Widget> widgets = [];
  formData.forEach((key, formParams) {
    widgets.add(FormUtil.textField(key, formParams['value'],
        controller: formParams['controller'] ?? null,
        hintText: formParams['hintText'] ?? '',
        prefixIcon: formParams['icon'],
        onChanged: handleTextFieldChanged,
        onClear: handleClear));
  });
  widgets.add(FormUtil.imagePicker(
    'imageUrl',
    () {
      _pickImage(context);
    },
    imageFile: imageFile,
    imageUrl: imageUrl,
  ));

  widgets.add(ButtonUtil.primaryTextButton(
    buttonName,
    handleSubmit,
    context,
    width: MediaQuery.of(context).size.width - 20,
  ));

  return widgets;
}

void _pickImage(BuildContext context) async {
  final List<AssetEntity> assets =
      await AssetPicker.pickAssets(context, maxAssets: 1);
  if (assets.length > 0) {
    File file = await assets[0].file;
    handleImagePicked(file);
  }
}

// 单个文件上传
var formData = FormData.fromMap({
  'name': 'wendux',
  'age': 25,
  'file': await MultipartFile.fromFile('./text.txt',filename: 'upload.txt')
});
response = await dio.post('/info', data: formData);
// 多个文件上传
FormData.fromMap({
  'files': [
    MultipartFile.fromFileSync('./example/upload.txt', filename: 'upload.txt'),
    MultipartFile.fromFileSync('./example/upload.txt', filename: 'upload.txt'),
  ]
});

import 'dart:io';

import 'package:dio/dio.dart';

class UploadService {
  static const String uploadBaseUrl = 'http://localhost:3900/api/upload/';
  static Future uploadImage(String key, File file) async {
    FormData formData =
        FormData.fromMap({key: await MultipartFile.fromFile(file.path)});
    var result = await Dio().post(uploadBaseUrl + 'image', data: formData);

    return result;
  }
}

_handleSubmit() async {
  //其他表单校验
  if (_imageFile == null) {
    Dialogs.showInfo(this.context, '图片不能为空');
    return;
  }
  EasyLoading.showInfo('请稍候...', maskType: EasyLoadingMaskType.black);

  try {
    String imageId;
    var imageResponse = await UploadService.uploadImage('image', _imageFile);
    if (imageResponse.statusCode == 200) {
      imageId = imageResponse.data['id'];
    }
    if (imageId == null) {
      Dialogs.showInfo(this.context, '图片上传失败');
      return;
    }
    Map<String, String> newFormData = {};
    _formData.forEach((key, value) {
      newFormData[key] = value['value'];
    });
    //新增时将图片 id 放入提交表单中
    newFormData['imageUrl'] = imageId;
    // 省略提交代码
  }
  // ...
  //省略异常处理代码
}