2. 程式人生 > >Android前端RxJava2+Retrofit2；後端SpringMvc實現圖片上傳

Android前端RxJava2+Retrofit2；後端SpringMvc實現圖片上傳

阿新 • • 發佈：2019-01-04

前言

因為前端使用的rxjava+retrofit+mvp的架構進行實現，因此考慮著圖片上傳的功能也直接用rxjava+retrofit去實現，結果在使用過程中，發現始終有問題，圖片上不去；測試了幾天，嘗試更新成rxjava2+retrofit2進行測試，結果成功了；因此這裡做一下記錄；如果不知道rxjava+retrofit使用的朋友可以參考之前寫的部落格淺談Android MVP設計模式（簡單結合RxJava+Retrofit）

Android前段實現

資源引入

在build.gradle檔案中新增rxjava2+retrofit2相關的引入；我這邊是以下相關的配置

    compile 'com.squareup.retrofit2:retrofit:2.3.0'
 

    compile 'com.squareup.retrofit2:converter-gson:2.3.0'
    compile 'com.squareup.retrofit2:adapter-rxjava2:2.3.0'
    compile 'com.squareup.okhttp3:okhttp:3.8.1'
    compile 'com.squareup.okhttp3:logging-interceptor:3.8.1'
    compile "io.reactivex.rxjava2:rxjava:2.1.1"
    compile 'io.reactivex.rxjava2:rxandroid:2.0.1'

service的編寫

    @Multipart
    @POST("/imgs/upload")
    Observable<String> uploadImgs(@Part List<MultipartBody.Part> file, @Query("data") String data);

這裡傳遞的是list，目的是方便傳輸多張圖片，如果只有一張，往list裡面塞一個值即可

基於Retrofit2自定義Subscriber

在retrofit中我們常用的Subscriber在retrofit2中竟然不見了,替換他的是Observer，為了減少程式碼的調整，我們自定義一個Subscriber，程式碼如下，裡面異常處理相關的程式碼，可以根據自己專案情況酌情調整:

public abstract class Subscriber<T> implements Observer<T> {
    @Override
    public void onError(Throwable e) {
        Throwable throwable = e;
        //獲取最根源的異常
        while (throwable.getCause() != null) {
            e = throwable;
            throwable = throwable.getCause();
        }

        NetWorkException ex;
        if (e instanceof HttpException) {             //HTTP錯誤
            HttpException httpException = (HttpException) e;
            NetWorkCodeEnum netWorkCode = NetWorkCodeEnum.getNetWorkCode(httpException.code() + "");
            if (null != netWorkCode)
                ex = new NetWorkException(netWorkCode.getHttpCode() + "", netWorkCode.getMessage());
            else
                ex = new NetWorkException(NetWorkCodeEnum.UNKNOWN.getHttpCode() + "", NetWorkCodeEnum.UNKNOWN.getMessage());
        } else if (e instanceof ConnectException) {
            ex = new NetWorkException(NetWorkCodeEnum.CODE_503.getHttpCode() + "", NetWorkCodeEnum.CODE_503.getMessage());
        } else if (e instanceof ResultException) {    //伺服器返回的錯誤
            ResultException resultException = (ResultException) e;
            ex = new NetWorkException(resultException.getmErrorCode(), resultException.getMessage());
        } else if (e instanceof JsonParseException
                || e instanceof JSONException
                || e instanceof ParseException) {
            ex = new NetWorkException(NetWorkCodeEnum.CODE_1001.getHttpCode() + "", NetWorkCodeEnum.CODE_1001.getMessage());//均視為解析錯誤
        } else if (e instanceof NetWorkException) {
            ex = (NetWorkException) e;
        } else {
            if (null != e.getMessage() && e.getMessage().length() > 0) {
                ex = new NetWorkException(NetWorkCodeEnum.OTHER.getHttpCode() + "", e.getMessage());//未知錯誤
            } else {
                ex = new NetWorkException(NetWorkCodeEnum.UNKNOWN.getHttpCode() + "", NetWorkCodeEnum.UNKNOWN.getMessage());//未知錯誤
            }
        }
        onError(ex);
    }


    /**
     * 錯誤回撥
     */
    protected abstract void onError(BaseException e);
}

Model層編寫

public void uploadImg(List<File> files) {
        MultipartBody.Builder builder = new MultipartBody.Builder()
                .setType(MultipartBody.FORM);//表單型別
        for (int i = 0; i < files.size(); i++) {
            File file = files.get(i);
            RequestBody photoRequestBody = RequestBody.create(MediaType.parse("image/jpg"), file);
            builder.addFormDataPart("file", file.getName(), photoRequestBody);
        }
        List<MultipartBody.Part> parts = builder.build().parts();

        managerService.uploadImgs(parts, "")
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Subscriber<String>() {

                    @Override
                    public void onSubscribe(@NonNull Disposable d) {

                    }

                    @Override
                    public void onNext(@NonNull String s) {

                    }

                    @Override
                    public void onComplete() {

                    }

                    @Override
                    protected void onError(BaseException e) {

                    }
                });
    }

Android呼叫相機拍照

android呼叫相機拍照有2種模式，一種是拍照後獲取壓縮圖；一種是拍照之後將圖片儲存到指定路徑，然後根據程式碼獲取原圖顯示上傳

private static int REQUEST_THUMBNAIL = 10;// 請求縮圖訊號標識
private static int REQUEST_ORIGINAL = 9;// 請求原圖訊號標識

  • 第一種方式

    Intent intent1 = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
// 啟動相機
startActivityForResult(intent1, REQUEST_THUMBNAIL);

  • 第二種方式

    //SD卡路徑
String sdPath = Environment.getExternalStorageDirectory().getPath();
//照片儲存的路徑及名稱
String picPath = sdPath + "/" + "test.png";

Intent intent2 = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
Uri uri = null;
if (Build.VERSION.SDK_INT <= 23) {
    //為拍攝的圖片指定一個儲存的路徑
    uri = Uri.fromFile(new File(picPath));
} else {
    ContentValues contentValues = new ContentValues(1);
    contentValues.put(MediaStore.Images.Media.DATA, picPath);
    uri = getContentResolver().insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues);
}
if (null != uri) {
    intent2.putExtra(MediaStore.EXTRA_OUTPUT, uri);
    startActivityForResult(intent2, REQUEST_ORIGINAL);
}

  • 接受圖片

       /**
     * 返回應用時回撥方法
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (resultCode == RESULT_OK) {
            if (requestCode == REQUEST_THUMBNAIL) {//對應第一種方法
                /**
                 * 通過這種方法取出的拍攝會預設壓縮，因為如果相機的畫素比較高拍攝出來的圖會比較高清，
                 * 如果圖太大會造成記憶體溢位（OOM），因此此種方法會預設給圖片進行壓縮
                 */
                Bundle bundle = data.getExtras();
                Bitmap bitmap = (Bitmap) bundle.get("data");
                img.setImageBitmap(bitmap);

                //這裡可以再將這個bitmap儲存到sd卡中，然後得帶一個file物件，即可進行上傳；這裡就不寫了
            } else if (requestCode == REQUEST_ORIGINAL) {//對應第二種方法
                /**
                 * 這種方法是通過記憶體卡的路徑進行讀取圖片，所以的到的圖片是拍攝的原圖
                 */
                FileInputStream fis = null;
                try {
                    Log.e("sdPath2", picPath);
                    //把圖片轉化為位元組流
                    fis = new FileInputStream(picPath);
                    //把流轉化圖片
                    Bitmap bitmap = BitmapFactory.decodeStream(fis);
                    img.setImageBitmap(bitmap);

                    //測試上傳
                    File file = new File(picPath);
                    List<File> files = new ArrayList<>();
                    //如果有多張如片，通過系統照片選擇取到相應的路徑，然後新增到list中即可
                    files.add(file);
                    //這裡為了方便測試，直接只用了model的程式碼進行測試了，實際開發的時候，這裡需要呼叫presenter的程式碼測試
                    uploadImageModel.uploadImg(files);

                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                } finally {
                    try {
                        fis.close();//關閉流
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }

後端實現（SpringMvc）

  • springmvc.xml配置

    <!-- SpringMVC上傳檔案時，需要配置MultipartResolver處理器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" />
        <!-- 指定所上傳檔案的總大小,單位位元組。注意maxUploadSize屬性的限制不是針對單個檔案，而是所有檔案的容量之和 20M,可根據情況調整 -->
        <property name="maxUploadSize" value="20971520" />
    </bean>

  • controller層程式碼編寫

        @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public String imageUpload(@RequestParam("file") MultipartFile[] partFiles, String data)
    {
        try
        {
            if (null != partFiles && partFiles.length > 0)
            {
                for (int i = 0; i < partFiles.length; i++)
                {
                    MultipartFile partFile = partFiles[i];
                    //伺服器圖片儲存的路徑
                    String imgPath = "E:/test/imgs/img" + i + ".png";
                    File imgFile = new File(imgPath);
                    //將圖片寫到指定的檔案下
                    partFile.transferTo(imgFile);
                }
                return "{\"status\":0,\"desc\":\"成功\"}";
            }
        }
        catch (Exception e)
        {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "{\"status\":-1,\"desc\":\"失敗\"}";
    }

    這裡只是寫了一個範例，後臺如何接受的操作，但是實際開發過程中邏輯相關的程式碼是應該在service中去寫；為了直觀的達到效果；這裡就直接寫在controller裡面了。

可能存在的問題

  • 檔案大小
    如果說檔案太大；可以在stringmvc.xml中將maxUploadSize屬性調大一點
  • nginx檔案大小
    nginx預設請求最大的檔案包為2M，如果上傳的圖片過大，那麼nginx就會報“413 Request Entity Too Large”錯誤；原因就是因為圖片大於2M了，可以在ngnix.conf配置檔案中的http{}下新增或者修改client_max_body_size 20m配置,即允許最大的包為20M，大小可根據情況調整；使用nginx -t測試配置是否符合要求；然後通過nginx -s reload重啟nginx即可

到這裡，單張圖片和多張圖片即可完成上傳了。

相關推薦

Android前端RxJava2+Retrofit2；後端SpringMvc實現圖片上傳

前言 因為前端使用的rxjava+retrofit+mvp的架構進行實現，因此考慮著圖片上傳的功能也直接用rxjava+retrofit去實現，結果在使用過程中，發現始終有問題，圖片上不去；測試了幾天，嘗試更新成rxjava2+retrofit2進行測試

SpringMvc實現圖片上傳

首先是設定一下tomcat的虛擬路徑，有兩種方法（以在C:/upfile/為例） 第一種是在tomcat的bin目錄下的server.xml新增一句 < Context docBase=“C:/upfile/” path="/upload" reloada

springMVC 實現圖片上傳

1.匯入需要的jar包,或者在maven中引入依賴 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload&

Android HTTP multipart/form-data 請求協議資訊實現圖片上傳

問題： Android應用中，當遇到填寫使用者資訊、發表評論等操作，不可避免會遇到“form表單操作”（類似web form操作）上傳圖片的功能。 在這種情況下，使用Android的HTTPConnection/ ApacheHTTP 通過POST 和GET的方式就實現不了

移動端H5實現圖片上傳

需求 公司現在在移動端使用webuploader實現圖片上傳，但最近需求太奇葩了，外掛無法滿足我們的PM 經過商討決定下掉這個外掛，使用H5原生的API實現圖片上傳。 7.3日釋出：單張圖片上傳 9.29日更新：多張圖片併發上傳 效果圖： 基礎知識 上傳圖片這塊有幾個知識點要先了解的。首先是有幾種常見的

前端Ajax/JS/HTML+後端SpringMVC（一）

過程 大致 傳輸 引號 mapping 開發 客戶 con int 1.JSON 1.1. 轉發或重定向的不足 對於發出的請求，最終需要給出“成功/失敗”的結果的話，轉發的方式來處理，給用戶的體驗就非常不好！即使用戶填錯了一項數據不達標，都需要回退至此前的頁面重新填寫，而原

前端Ajax/JS/HTML+後端SpringMVC（二）

serialize 關於 2個 ets test 得到 return 2.4 提交 1. jQuery AJAX 1.1. jQuery框架中的ajax()函數 在應用了jQuery框架後，調用ajax()函數即可發出AJAX請求，並獲取響應結果，該函數的參數必須是JSON

Android網路框架Retrofit2使用封裝：Get/Post/檔案上傳/下載

背景 Android開發中的網路框架經過多年的發展，目前比較主流的就是Retrofit了，Retrofit2版本出現也有幾年了，為了方便使用，特封裝了一些關於Retrofit2的程式碼，分享給大家。 框架主要包括： Get請求 Post請求 檔案上傳 檔案下載

由SpringMVC實現檔案上傳，前端基於easyui

後臺控制層的方法參考部落格：http://blog.csdn.net/qciwyy/article/details/54017166 本部落格主要講解前臺方法（基於easyui的easyui-filebox控制元件） 一 .easyui-1.4.0前版本使用方法，在這之前e

微信端調取相冊和攝像頭，實現圖片上傳，並上傳到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時，遇到了圖片上傳的問題，查看了微信的開發者文檔，裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

一個完整的springmvc + ajaxfileupload實現圖片上傳的案例

multipart per cnblogs not his let facade func connector 一，原理 詳細原理請看這篇文章 springmvc + ajaxfileupload解決ajax不能異步上傳圖片的問題。java.lang.ClassCastEx

java後臺開發SpringMVC例子--圖片上傳下載

java後臺開發SpringMVC例子–圖片上傳下載 文章目錄 java後臺開發SpringMVC例子--圖片上傳下載 1.配置 2.測試 環境： win7；jdk1.8

AJAX實現圖片上傳和預覽（傳統ajax與jQuery AJAX；帶圖片的表單提交）

  一、通過Servlet3.0和傳統的AJAX實現圖片上傳和預覽          此方法也適用於帶圖片的表單提交         上傳時預覽圖片    

SpringMVC實現檔案上傳

<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframew

【vue】移動端通過cube-ui實現圖片上傳

「Pre」cube-ui的安裝 POST：https://blog.csdn.net/dangbai01_/article/details/84935882    一、普通上傳   <cube-upload  &nb

使用springmvc實現檔案上傳

1.匯入檔案上傳的jar包        使用 Commons-fileupload 元件實現檔案上傳，需要匯入該元件相應的支撐 jar 包： Commons-fileupload 和commons-io。 commons-io 不屬於檔案上傳元件的開發 jar 檔案，但

SpringMVC的學習（五）——SpringMVC返回值、SpringMVC實現檔案上傳

一、SpringMVC返回值 ①json資料 訪問控制器返回Json型別資料 匯入對應的JSON包 支援: jackson : jackson-databind/jackson-annotations/jack-core gson: gson 注意:  jack

SpringMVC單圖片上傳至資料庫和回顯

在登入時上傳一個圖片以及回顯。之前，需要匯入兩個jar包：commons-fileupload-1.3.1和commons-io-2.4。 Index.jsp頁面： 一定要寫 enctype="multipart/form-data"，否則springmvc就會解析失敗。

SpringMVC——實現檔案上傳下載

一、檔案上傳 1.引入依賴包 在pom.xml檔案中新增如下內容，引入 commons-fileupload 和 commons-io 兩個包。 <dependency> <groupId>commons-f

Android模擬 HTTP multipart/form-data 請求協議資訊實現圖片上傳

轉自：http://www.linuxidc.com/Linux/2011-08/41944.htm 問題： Android應用中，當遇到填寫使用者資訊、發表評論等操作，不可避免會遇到“form表單操作”（類似web form操作）上傳圖片的功能。 在這種情況下，使用