Flutter解决图片File格式上传失败,通过dio上传文件(图片)

本文介绍了在Flutter中使用dio库解决File格式图片上传失败的问题,分别提供了dio2.0+和dio3.0+的上传步骤,强调了参数转化的重要性。

上传请求方法如下:

Future uploadRequest(url,{map}) async{
  try{
    Response response;
    Map<String, dynamic> headers = new Map();
    SharedPreferences sp = await SharedPreferences.getInstance();
    String cookie = sp.get("cookie");
    if(cookie==null || cookie.length==0){
    }else{
      headers['Cookie'] = cookie;
    }
    Options options = Options(
        headers: headers
    );

    FormData formData;
    formData = FormData.from(map);
    Dio dio = new Dio();
    if(map == null){
      response = await dio.post<String>(url);
    }else{
      response = await dio.post<String>(url,data: formData,options: options);
    }
    print("POST:URL="+url);
    print("POST:StatusCode="+response.statusCode.toString());
    print("POST:BODY="+formData.toString());
    print("POST:RESULT="+response.data.toString());
    if(response.statusCode == 200){
      return response.data;
    }else{
      return REQUEST_ERROR;
    }
  }catch(e){
    print(REQUEST_ERROR+"\nPOST:URL="+url);
    print(REQUEST_ERROR+"\nPOST:BODY="+map.toString());
    print(REQUEST_ERROR+"\nPOST:ERROR="+e.toString());
    return REQUEST_ERROR;
  }
}

dio2.0+使用方法:

1.获取文件名及格式

String path1 = _image1.path;
var name1 = path1.substring(path1.lastIndexOf("/") + 1, path1.length);
String suffix1 = name1.substring(name1.lastIndexOf(".") + 1, name1.length);

2.调用上传方法(参数转化很重要)

var data = {
 'loadingFile': UploadFileInfo(new File(path1), name1,
          contentType: ContentType.parse("image/$suffix1")
          ),//图片1
}
 uploadRequest(HttpApi.PAY_ORDER, map: data).then((val) {
      print("支付=" + val.toString());
  }

dio3.0+使用方法:

///上传商品banner
  static Future fetchUploadProductBanner(String path) async{
    var name = path.substring(path.lastIndexOf("/") + 1, path.length);
    var image = await MultipartFile.fromFile(
      path,
      filename: name,
    );
    FormData formData = FormData.fromMap({
      "image": image
    });
    var response = await http.post(HttpConstants.UPLOAD_PRODUCT_BANNER_IMAGE,data: formData);
    return ImageBean.fromJson(response.data);
  }
### 如何在 Flutter 中使用 Dio上传图片 要在 Flutter 中通过 Dio 库实现图片上传功能,可以按照以下方式操作。以下是详细的说明以及代码示例。 #### 导入必要的库并初始化 Dio 实例 为了使用 Dio 进行 HTTP 请求,首先需要导入 `dio` 的包,并创建一个 Dio 对象实例以便后续调用[^1]: ```dart import 'package:dio/dio.dart'; Dio dio = Dio(); ``` #### 创建文件对象用于上传 当准备上传本地存储中的文件时,可以通过 Dart 提供的 `File` 类来加载目标文件路径下的数据。假设我们已经获取到了外部存储目录,则可通过该路径构建所需的文件对象[^2]: ```dart Directory directory = await getExternalStorageDirectory(); String filePath = '${directory.path}/example_image.jpg'; File fileToUpload = File(filePath); ``` #### 构建表单数据结构 对于复杂的 POST 请求来说,通常会采用键值对的形式提交参数给服务器端处理。这里需要用到的是 `FormData`, 它允许我们将普通的字符串字段与二进制大对象(如图像)一起发送出去: ```dart FormData formData = FormData.fromMap({ "name": "example_name", "file": UploadFileInfo(fileToUpload, "example_image.jpg"), }); ``` 注意这里的第二个参数 `"example_image.jpg"` 是指明了服务端接收到此文件后的名称[^2]. #### 发起网络请求完成实际传输过程 最后一步就是利用前面定义好的变量去执行真正的POST方法并向指定URL地址传递所需的数据。同时还可以监听整个过程中已传送字节数量的变化情况从而显示进度条等功能[^2]: ```dart Response response; try { response = await dio.post( "https://your-server-url/upload_endpoint", data: formData, options: Options(method:'POST'), onSendProgress: (int sent, int total){ print('Progress: ${(sent / total * 100).toStringAsFixed(0)}%'); } ); } catch(e){ rethrow; } print(response.data.toString()); ``` 以上即为完整的基于 flutter framework 下借助 dio plugin 来达成图片资料上载至远程web service的例子[^2]^. ### 注意事项 - 确保设备拥有访问互联网权限,在 AndroidManifest.xml 文件里添加 `<uses-permission android:name="android.permission.INTERNET"/>`. - 需要读写手机内部储存空间的话也要记得申请相应的许可.
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值