zoukankan      html  css  js  c++  java
  • 【Flutter】上传图片

    import 'dart:io';
    import 'package:dio/dio.dart';
    
    import 'package:flutter/material.dart';
    import 'package:fluttertoast/fluttertoast.dart';//toast
    import 'package:image_picker/image_picker.dart';//从相册里面选择图片或者拍照获取照片
    class HeadImageUploadPage extends StatefulWidget {
      @override
      _HeadImageUploadPageState createState() => _HeadImageUploadPageState();
    }
    
    class _HeadImageUploadPageState extends State<HeadImageUploadPage> {
      File _image;
    
      Future getImage() async {
        var image = await ImagePicker.pickImage(source: ImageSource.gallery);
        _upLoadImage(image);//上传图片
        setState(() {
          _image = image;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Image Picker Example'),
          ),
          body: Center(
            child: _image == null
                ? Text('No image selected.')
                : Image.file(_image),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: getImage,
            tooltip: 'Pick Image',
            child: Icon(Icons.add_a_photo),
          ),
        );
      }
    //上传图片
      _upLoadImage(File image) async {
        String path = image.path;
        var name = path.substring(path.lastIndexOf("/") + 1, path.length);
        FormData formData = new FormData.from({
          "file": new UploadFileInfo(new File(path), name)
        });
        Dio dio = new Dio();
        var respone = await dio.post<String>("路径", data: formData);
        if (respone.statusCode == 200) {
          Fluttertoast.showToast(
              msg: "图片上传成功",
              gravity: ToastGravity.CENTER,
              textColor: Colors.grey);
        }
      }
    }
      

  • 相关阅读:
    数据库语句学习(union语句)
    终于开通博客了啦
    Winform用Post方式打开IE
    Winform webbrowser 隐藏 html 元素
    MVC 附件在线预览
    典型用户和场景
    我的第一篇博客01
    大数据算法摘录
    mac下查看端口占用情况
    tomcat的运行脚本
  • 原文地址:https://www.cnblogs.com/sangwl/p/11001783.html
Copyright © 2011-2022 走看看