Retrofit2.0 实现图文(参数+图片)上传方法总结

最近项目里用到了类似图文上传的功能,以前都是封装OkHttp的文件上传功能,这次想换个姿势,想用Retrofit2.0实现这样的功能,本来以为挺简单的,没想到进入了深坑,连续调整了好几种姿势都报了同一个错,接着网上类似的文章找了一大推,讲得都是模棱两可,或者对多参数格式不够友好,最后还是去看了相关的源码,自己把这个问题提出来解决了,在这里记录一下。

一、定义网络请求接口

public interface GoodsReturnApiService {
  @Multipart
  @POST(Compares.GOODS_RETURN_POST)  //这里是自己post文件的地址
  Observable<GoodsReturnPostEntity> postGoodsReturnPostEntitys(@PartMap Map<String, RequestBody> map, @Part List<MultipartBody.Part> parts);
}

上面定义了一个接口用于上传文件请求,有几个注解需要说明一下, @Multipart这是Retrofit专门用于文件上传的注解,需要配合@POST一起使用。

方法postGoodsReturnPostEntitys(@PartMap Map<String, RequestBody> map, @Part List<MultipartBody.Part> parts)第一个参数使用注解@PartMap用于多参数的情况,如果是单个参数也可使用注解@Part。

在类型Map<String, RequestBody>中,Map第一个泛型String是服务器接收用于文件上传参数字段的Key,第二个泛型RequestBody是OkHttp3包装的上传参数字段的Value,这也是图文上传成功的关键所在。在后面会具体说到。

第二个参数使用注解@Part用于文件上传,多文件上传使用集合类型List<MultipartBody.Part>,单文件可以使用类型MultipartBody.Part,具体的使用同样后面讲。

这里着重说明一下,postGoodsReturnPostEntitys(@PartMap Map<String, RequestBody> map, @Part List<MultipartBody.Part> parts)方法参数这样写纯属个人习惯,你也可以直接使用一个参数postGoodsReturnPostEntitys(@PartMap Map<String, RequestBody> map),不过后面对RequestBody的处理方式也要跟着变化,这里就不详细说了,只会介绍上面这种简便清晰的方式。

二、初始化Retrofit

public class HttpRequestClient {

  public static final String TAG = "HttpRequestClientTAG";

  private static Retrofit retrofit;

  private static OkHttpClient getOkHttpClient() {
    //日志显示级别
    HttpLoggingInterceptor.Level level= HttpLoggingInterceptor.Level.BODY;
    //新建log拦截器
    HttpLoggingInterceptor loggingInterceptor=new HttpLoggingInterceptor(new HttpLoggingInterceptor.Logger() {
      @Override
      public void log(String message) {
        Log.d(TAG, message);
      }
    });
    loggingInterceptor.setLevel(level);
    //定制OkHttp
    OkHttpClient.Builder httpClientBuilder = new OkHttpClient
        .Builder();
    //OkHttp进行添加拦截器loggingInterceptor
    httpClientBuilder.addInterceptor(loggingInterceptor);
    return httpClientBuilder.build();
  }

  public static Retrofit getRetrofitHttpClient(){
    if(null == retrofit){
      synchronized (HttpRequestClient.class){
        if(null == retrofit){
          retrofit = new Retrofit.Builder()
              .client(getOkHttpClient())
              .baseUrl(Compares.URL)
              .addConverterFactory(GsonConverterFactory.create())
              .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
              .build();
        }
      }
    }
    return retrofit;
  }
}

为了演示,Retrofit封装比较简陋,为的是查看网络拦截,就不详细说了。

三、发起文件上传请求

private void postGoodsPicToServer(){
    Map<String,RequestBody> params = new HashMap<>();
    //以下参数是伪代码,参数需要换成自己服务器支持的
    params.put("type", convertToRequestBody("type"));
    params.put("title",convertToRequestBody("title"));
    params.put("info",convertToRequestBody("info");
    params.put("count",convertToRequestBody("count"));

    //为了构建数据,同样是伪代码
    String path1 = Environment.getExternalStorageDirectory() + File.separator + "test1.jpg";
    String path2 = Environment.getExternalStorageDirectory() + File.separator + "test1.jpg";

    List<File> fileList = new ArrayList<>();

    fileList.add(new File(path1));
    fileList.add(new File(path2));

    List<MultipartBody.Part> partList = filesToMultipartBodyParts(fileList);

    HttpRequestClient.getRetrofitHttpClient().create(GoodsReturnApiService.class)
        .postGoodsReturnPostEntitys(params,partList)
        .subscribeOn(Schedulers.newThread())
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe(new Observer<GoodsReturnPostEntity>() {
          @Override
          public void onSubscribe(@NonNull Disposable d) {

          }

          @Override
          public void onNext(@NonNull GoodsReturnPostEntity goodsReturnPostEntity) {

          }

          @Override
          public void onError(@NonNull Throwable e) {

          }

          @Override
          public void onComplete() {

          }
        });
}

上面的params和fileList都是构造的伪代码,需要根据自己项目的业务需求改变。

下面是上传文件成功第一个关键,对参数请求头(姑且叫这个名字,对应Retrofit上传文件时参数那部分请求头,下文件(图片)请求头同理,对应文件那部分请求头)的content-type赋值,使用convertToRequestBody()方法。

private RequestBody convertToRequestBody(String param){
    RequestBody requestBody = RequestBody.create(MediaType.parse("text/plain"), param);
    return requestBody;
  }

因为GsonConverterFactory.create()转换器的缘故,会将参数请求头的content-type值默认赋值application/json,如果没有进行这步转换操作,就可以在OKHttp3的日志拦截器中查看到这样的赋值,这样导致服务器不能正确识别参数,导致上传失败,所以这里需要对参数请求头的content-type设置一个正确的值:text/plain。

下面是上传文件成功第二个关键的地方,将文件(图片)请求头的content-type使用方法filesToMultipartBodyParts()对其赋值"image/png",并返回MultipartBody.Part集合。

private List<MultipartBody.Part> filesToMultipartBodyParts(List<File> files) {
    List<MultipartBody.Part> parts = new ArrayList<>(files.size());
    for (File file : files) {
      RequestBody requestBody = RequestBody.create(MediaType.parse("image/png"), file);
      MultipartBody.Part part = MultipartBody.Part.createFormData("multipartFiles", file.getName(), requestBody);
      parts.add(part);
    }
    return parts;
  }

说到底,还是对参数请求头和文件(图片)请求头的content-type属性赋值处理,不要让Retrofit 默认赋值,这里才是关键。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android Retrofit实现多图片/文件、图文上传功能

    什么是 Retrofit ? Retrofit是Square开发的一个Android和Java的REST客户端库.这个库非常简单并且具有很多特性,相比其他的网络库,更容易让初学者快速掌握.它可以处理GET.POST.PUT.DELETE-等请求,还可以使用picasso加载图片. 一.再次膜拜下Retrofit Retrofit无论从性能还是使用方便性上都很屌!!!,本文不去介绍其运作原理(虽然很想搞明白),后面会出专题文章解析Retrofit的内部原理:本文只是从使用上解析Retrofit实现

  • Retrofit实现图文上传至服务器

    前言:现在大多数的项目中都涉及图片+文字上传了,下面请详见实现原理: 开发环境:AndroidStudio 1.引入依赖: compile 'com.squareup.retrofit2:retrofit:2.1.0'   2.网络权限: <uses-permission android:name="android.permission.INTERNET" />   3.创建上传对象OkHttpClient : private static final OkHttpClie

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • 移动端html5图片上传方法【更好的兼容安卓IOS和微信】

    之前的移动端上传的方法,有些朋友测试说微信支持不是很好,还有部分安卓机也不支持,其实我已经有了另一个方法,但是例子还没整理出来,而联系我的很多朋友需要,所以就提前先发出来了,并且做一个简单的说明,就不做一个demo了. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev

  • 实例讲解javascript实现异步图片上传方法

    我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的URL更换成自己的,也可以直接写一个本地地址测试. html代码: <form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data"> <input type="

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • 利用Vue3和element-plus实现图片上传组件

    目录 前言 具体代码 图片上传 上传组件 前言 element-plus 提供了 uploader 组件,但是不好定制化,所以自己又造了个轮子,实现了一个图片上传的组件,它的预期行为是: 1.还没上传图片时,显示上传卡片 2.上传图片时显示进度条,隐藏上传卡片 3.上传成功时显示图片缩略图,上传失败则显示失败提示 4.支持上传图片的预览和删除 具体如下图所示: 具体代码 图片上传 这里使用的图床是牛图网,无需注册,貌似也没有图片大小的限制,但是请不要上传违规图像. <code>import a

  • 基于ThinkPHP5.0实现图片上传插件

    效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • SpringBoot2.0实现多图片上传加回显

    目录 上传 效果展示 配置上传图片的属性 异常处理 遇到的坑 完整代码地址 这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显.由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看. 上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input>中的name值相对应 @RequestMapping("/pic"

  • YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

    将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

  • spring boot2.0图片上传至本地或服务器并配置虚拟路径的方法

    最近写了关于图片上传至本地文件夹或服务器,上传路径到数据库,并在上传时预览图片.使用到的工具如下: 框架:spring boot 2.0 前端模板:thymeleaf 图片预览:js 首先,上传以及预览,js以及<input type="file">,以及预览图片的JS function Img(obj){ var imgFile = obj.files[0]; console.log(imgFile); var img = new Image(); var fr = ne

随机推荐