devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【手把手教】Android开发两种方式实现图片的上传下载_android 上传图片

作者：花生_TL007 | 2024-05-03 14:06:46

赞

踩

android 上传图片

Android 图片上传的应用场景

在Android开发中，很多时候我们需要进行图片，文件的上传下载，最直接的一个应用场景就是用户头像的保存与切换，以及像即时通讯中的图片发送等任何在App中设计图片的应用都是通过图片的上传下载完成的。

Android 如何实现图片的上传下载？

近期在工作中遇到了需要实现其图片上传的功能，特此写了一个demo帮助更多的人进行相关学习

这是demo的效果图：

其实整个过程也非常简单，图片上传可以整理为访问本地选取图片，以及图片提交上传（后端提供上传图片接口，这里只对安卓技术进行相关说明）。

实现这一过程这边使用了PictureSelector+Xutill或者PictureSelector+OkHttp进行了功能的实现。

pictureSelector是一个强大的Android选取图片，上传图片的开源工具，支持从相册或拍照选择图片或视频、音频，支持动态权限获取、裁剪(单图or多图裁剪)、压缩、主题自定义配置等功能、适配android 6.0+系统，而且你能遇到的问题，README文档都有解决方案。

xutils是前几年比较火得一个开源框架，主要分四个重要的模块：ViewUtils，HttpUtils，BitmapUtils，DbUtils，包含了很多实用的工具类，支持大文件上传，且有更全面的http请求协议支持，拥有灵活的Orm，支持事件注解且不受代码混淆影响。

xUtils3网络模块大大方便了在实际开发中网络模块的开发，xUtils3网络模块大致包括GET请求、POST请求、请求方式、上传文件、下载文件、使用缓存等功能

Android 图片上传下载实现过程（小白教学）

Demo的UI界面：MainActivity的activity_main xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:background="@color/coreGray"
  8.     android:orientation="vertical"
  9.     tools:context=".MainActivity">
  10.  
  11.  
  12.     <include layout="@layout/layout_title"/>
  13.  
  14.     <LinearLayout
  15.         style="@style/LoginLayoutStyle"
  16.  
  17.         android:layout_width="match_parent">
  18.  
  19.         <TextView
  20.             android:id="@+id/aaa"
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:layout_gravity="center"
  24.             android:text="AAA:"
  25.             android:textColor="@color/black60"
  26.             android:textSize="20dp" />
  27.  
  28.         <com.tz.picturedemo.view.ClearEditText
  29.             android:id="@+id/qs_username2"
  30.             style="@style/EditTextStyle"
  31.             android:layout_width="match_parent"
  32.             android:layout_height="wrap_content"
  33.             android:hint="请输入AAAA"
  34.             android:inputType="text"
  35.             android:lines="1"
  36.             android:singleLine="true"
  37.             android:textCursorDrawable="@null"
  38.             app:regexType="name" />
  39.     </LinearLayout>
  40.     <LinearLayout
  41.         style="@style/LoginLayoutStyle"
  42.         android:layout_width="match_parent">
  43.  
  44.         <TextView
  45.             android:layout_width="wrap_content"
  46.             android:layout_height="wrap_content"
  47.             android:layout_gravity="center"
  48.             android:text="BBB:"
  49.             android:textColor="@color/black60"
  50.             android:textSize="20dp" />
  51.  
  52.         <com.tz.picturedemo.view.ClearEditText
  53.             android:id="@+id/qs_username3"
  54.             style="@style/EditTextStyle"
  55.             android:layout_width="match_parent"
  56.             android:layout_height="wrap_content"
  57.             android:hint="请输入BBBB"
  58.             android:inputType="text"
  59.             android:lines="1"
  60.             android:singleLine="true"
  61.             android:textCursorDrawable="@null"
  62.             app:regexType="name" />
  63.     </LinearLayout>
  64.     <LinearLayout
  65.         style="@style/LoginLayoutStyle"
  66.         android:layout_width="match_parent">
  67.  
  68.         <TextView
  69.             android:layout_width="wrap_content"
  70.             android:layout_height="wrap_content"
  71.             android:layout_gravity="center"
  72.             android:text="CCC:"
  73.             android:textColor="@color/black60"
  74.             android:textSize="20dp" />
  75.  
  76.         <com.tz.picturedemo.view.ClearEditText
  77.             android:id="@+id/qs_username"
  78.             style="@style/EditTextStyle"
  79.             android:layout_width="match_parent"
  80.             android:layout_height="wrap_content"
  81.             android:hint="请输入CCCC"
  82.             android:inputType="text"
  83.             android:lines="1"
  84.             android:singleLine="true"
  85.             android:textCursorDrawable="@null"
  86.             app:regexType="name" />
  87.     </LinearLayout>
  88.  
  89.     <TextView
  90.         android:layout_width="match_parent"
  91.         android:layout_height="wrap_content"
  92.         android:text="上传图片"
  93.         android:textColor="@color/black60"
  94.         android:padding="10dp"
  95.         android:textSize="20sp"/>
  96.     <LinearLayout
  97.         android:layout_width="match_parent"
  98.         android:layout_height="wrap_content"
  99.         android:paddingTop="20dp"
  100.         android:orientation="horizontal">
  101.  
  102.         <LinearLayout
  103.             android:layout_width="wrap_content"
  104.             android:layout_height="wrap_content"
  105.             android:layout_weight="1"
  106.             android:layout_gravity="center"
  107.             android:gravity="center"
  108.             android:orientation="vertical">
  109.             <ImageView
  110.                 android:id="@+id/picture1"
  111.                 android:layout_width="wrap_content"
  112.                 android:layout_height="wrap_content"
  113.                 android:src="@mipmap/ic_add_image"/>
  114.  
  115.             <TextView
  116.                 android:layout_width="wrap_content"
  117.                 android:layout_height="wrap_content"
  118.                 android:paddingTop="10dp"
  119.                 android:text="正面"
  120.                 android:textColor="@color/black60"
  121.                 android:textSize="18sp" />
  122.  
  123.         </LinearLayout>
  124.  
  125.         <LinearLayout
  126.             android:layout_width="wrap_content"
  127.             android:layout_height="wrap_content"
  128.             android:layout_weight="1"
  129.             android:layout_gravity="center"
  130.             android:gravity="center"
  131.             android:orientation="vertical">
  132.             <ImageView
  133.                 android:id="@+id/picture2"
  134.                 android:layout_width="wrap_content"
  135.                 android:layout_height="wrap_content"
  136.                 android:src="@mipmap/ic_add_image"/>
  137.  
  138.             <TextView
  139.                 android:layout_width="wrap_content"
  140.                 android:layout_height="wrap_content"
  141.                 android:paddingTop="10dp"
  142.                 android:text="侧面"
  143.                 android:textColor="@color/black60"
  144.                 android:textSize="18sp" />
  145.  
  146.         </LinearLayout>
  147.  
  148.         <LinearLayout
  149.             android:layout_width="wrap_content"
  150.             android:layout_height="wrap_content"
  151.             android:layout_weight="1"
  152.             android:layout_gravity="center"
  153.             android:gravity="center"
  154.             android:orientation="vertical">
  155.             <ImageView
  156.                 android:id="@+id/picture3"
  157.                 android:layout_width="wrap_content"
  158.                 android:layout_height="wrap_content"
  159.                 android:src="@mipmap/ic_add_image"/>
  160.  
  161.             <TextView
  162.                 android:layout_width="wrap_content"
  163.                 android:layout_height="wrap_content"
  164.                 android:paddingTop="10dp"
  165.                 android:text="反面"
  166.                 android:textColor="@color/black60"
  167.                 android:textSize="18sp" />
  168.         </LinearLayout>
  169.  
  170.     </LinearLayout>
  171.  
  172.     <Button
  173.         android:id="@+id/makesure"
  174.         android:layout_width="match_parent"
  175.         android:layout_height="45dp"
  176.         android:text="提交"
  177.         android:layout_marginLeft="15dp"
  178.         android:layout_marginRight="15dp"
  179.         android:layout_marginTop="50dp"
  180.         android:textSize="20dp"
  181.         android:textColor="@color/white"
  182.         android:background="@drawable/share_item_blue_bg"
  183.         />
  184. </LinearLayout>

我在此处为了界面美化，引用了一些第三方自定义view大家可自行替换成原生即可

Demo功能核心代码 MainActivity

  1. package com.tz.picturedemo;
  2.  
  3. import static com.luck.picture.lib.config.SelectMimeType.ofImage;
  4. import androidx.appcompat.app.AppCompatActivity;
  5. import android.graphics.Color;
  6. import android.os.Bundle;
  7. import android.util.Log;
  8. import android.view.View;
  9. import android.widget.Button;
  10. import android.widget.ImageView;
  11. import android.widget.Toast;
  12. import com.alibaba.fastjson.JSON;
  13. import com.bumptech.glide.Glide;
  14. import com.luck.picture.lib.basic.PictureSelector;
  15. import com.luck.picture.lib.config.PictureConfig;
  16. import com.luck.picture.lib.config.SelectMimeType;
  17. import com.luck.picture.lib.entity.LocalMedia;
  18. import com.luck.picture.lib.interfaces.OnResultCallbackListener;
  19. import org.xutils.common.Callback;
  20. import org.xutils.http.RequestParams;
  21. import org.xutils.x;
  22. import java.io.File;
  23. import java.io.IOException;
  24. import java.util.ArrayList;
  25. import java.util.List;
  26. import okhttp3.Call;
  27. import okhttp3.MediaType;
  28. import okhttp3.MultipartBody;
  29. import okhttp3.OkHttpClient;
  30. import okhttp3.Request;
  31. import okhttp3.RequestBody;
  32. import okhttp3.Response;
  33.  
  34. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  35.  
  36.     private ImageView mPicture1;
  37.     private ImageView mPicture2;
  38.     private ImageView mPicture3;
  39.     private  List<String>  PictureArr=new ArrayList<>();
  40.     private Button mBtn;
  41.  
  42.     @Override
  43.     protected void onCreate(Bundle savedInstanceState) {
  44.         super.onCreate(savedInstanceState);
  45.         setContentView(R.layout.activity_main);
  46.         getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN );//这句让view 顶到顶
  47.         getWindow().setStatusBarColor(Color.TRANSPARENT);//这句让状态栏透明
  48.         initVew();
  49.     }
  50.  
  51.     private void initVew() {
  52.         mPicture1=findViewById(R.id.picture1);
  53.         mPicture2=findViewById(R.id.picture2);
  54.         mPicture3=findViewById(R.id.picture3);
  55.         mBtn=findViewById(R.id.makesure);
  56.  
  57.         mPicture1.setOnClickListener(this);
  58.         mPicture2.setOnClickListener(this);
  59.         mPicture3.setOnClickListener(this);
  60.         mBtn.setOnClickListener(this);
  61.     }
  62.  
  63.     @Override
  64.     public void onClick(View view) {
  65.         switch (view.getId()) {
  66.             case R.id.picture1:
  67.                 photoAndAll(mPicture1);
  68.                 break;
  69.             case R.id.picture2:
  70.                 photoAndAll(mPicture2);
  71.             break;
  72.             case R.id.picture3:
  73.                 photoAndAll(mPicture3);
  74.                 break;
  75.             case R.id.makesure:
  76.  
  77.                 break;
  78.         }
  79.     }
  80.  
  81.  
  82.     private  void photoAndAll(ImageView imageView){
  83.         PictureSelector.create(this)
  84.                 .openGallery(SelectMimeType.ofImage())
  85.                 .setImageEngine(GlideEngine.createGlideEngine()).setMaxSelectNum(1)
  86.                 .forResult(new OnResultCallbackListener<LocalMedia>() {
  87.                     @Override
  88.                     public void onResult(ArrayList<LocalMedia> result) {
  89.                         Log.e("leo","图片路径"+result.get(0).getPath());
  90.                         Log.e("leo","绝对路径"+result.get(0).getRealPath());
  91.                         Glide.with(MainActivity.this).load(result.get(0).getPath()).into(imageView);
  92.                         //将bitmap图片传入后端
  93.                         //imageUpLoad(result.get(0).getRealPath());
  94.                         SubmitPicture(result.get(0).getRealPath());
  95.                     }
  96.                     @Override
  97.                     public void onCancel() {
  98.                         Toast.makeText(MainActivity.this, "error", Toast.LENGTH_SHORT).show();
  99.                     }
  100.                 });
  101.     }
  102.  
  103.     public static void imageUpLoad(String localPath) {
  104.         MediaType MEDIA_TYPE_PNG = MediaType.parse("image/png");
  105.         OkHttpClient client = new OkHttpClient();
  106.  
  107.         MultipartBody.Builder builder = new MultipartBody.Builder().setType(MultipartBody.FORM);
  108.  
  109.         File f = new File(localPath);
  110.         builder.addFormDataPart("files", f.getName(), RequestBody.create(MEDIA_TYPE_PNG, f));
  111.         final MultipartBody requestBody = builder.build();
  112.         //构建请求
  113.         final Request request = new Request.Builder()
  114.                 .url("后端接口")//地址
  115.                 .post(requestBody)//添加请求体
  116.                 .build();
  117.  
  118.         client.newCall(request).enqueue(new okhttp3.Callback() {
  119.             @Override
  120.             public void onFailure(Call call, IOException e) {
  121.                 System.out.println("上传失败:e.getLocalizedMessage() = " + e.getLocalizedMessage());
  122.             }
  123.  
  124.             @Override
  125.             public void onResponse(Call call, Response response) throws IOException {
  126.  
  127.                 pmodel model = JSON.parseObject(response.body().string(), pmodel.class);
  128.                 Log.e("leo",JSON.toJSONString(model));
  129.                 pmodel model2 = JSON.parseObject(JSON.toJSONString(model), pmodel.class);
  130.               
  131.             }
  132.         });
  133.     }
  134.  
  135.  
  136.     private void  SubmitPicture(String path){
  137.         String  url = "后端接口";
  138.         String token="token，没有要求则无需写入";
  139.         RequestParams params = new RequestParams(url);
  140.         params.addHeader("Authorization",token);
  141.  
  142.         //设置表单传送
  143.         params.setMultipart(true);
  144.         params.addBodyParameter("file",new File(path));
  145.         params.addParameter("fileType","PICTURE");
  146.         x.http().post(params, new Callback.CommonCallback<String>() {
  147.             @Override
  148.             public void onSuccess(String result) {
  149.                 Log.e("leo","2222"+params);
  150.                 Toast.makeText(MainActivity.this, "上传成功!", Toast.LENGTH_SHORT).show();
  151.                 Log.e("leo","返回"+result);
  152.                 pmodel model = JSON.parseObject(result, pmodel.class);
  153.                 PictureArr.add(model.getData().get(0).getUrl());
  154.             }
  155.  
  156.             @Override
  157.             public void onError(Throwable ex, boolean isOnCallback) {
  158.                 Log.e("leo","失败"+ex.getMessage());
  159.             }
  160.  
  161.             @Override
  162.             public void onCancelled(CancelledException cex) {
  163.  
  164.             }
  165.  
  166.             @Override
  167.             public void onFinished() {
  168.             }
  169.         });
  170.     }
  171.  
  172. }

说明与解析：这边我们通过点击上传ImageView，则利用pictureSelector进行相册照片的选取，即photoAndAll方法进行选取，并且利用Glide（图片加载工具类）进行UI界面的显示，最后利用两种方法(imageUpload和SubmitPicture)提交上传图片，两种方法自行选取即可。

第三方pictureSelector的引入，以及Glide图片加载，xutils工具类的引入可参考如下：

  1.  // PictureSelector 基础 (必须)
  2.     implementation 'io.github.lucksiege:pictureselector:v3.0.5'
  3.     // 图片压缩 (按需引入)
  4.     implementation 'io.github.lucksiege:compress:v3.0.5'
  5.     // 图片裁剪 (按需引入)
  6.     implementation 'io.github.lucksiege:ucrop:v3.0.5'
  7.     // 自定义相机 (按需引入)
  8.     implementation 'io.github.lucksiege:camerax:v3.0.5'
  9.     //    加载网络图片
  10.     implementation 'com.github.bumptech.glide:glide:4.10.0'
  11.     annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'
  12.     //网络请求
  13.     implementation 'org.xutils:xutils:3.8.4'

xutils工具的使用需要创建自定义Application进行初始化

  1. public class BaseApplication extends Application {
  2.     public static Handler sHandler;
  3.     public static Context sContext = null;
  4.     @Override
  5.     public void onCreate() {
  6.         super.onCreate();
  7.  
  8.         //初始化xUtils
  9.         x.Ext.init(this);
  10.         x.Ext.setDebug(BuildConfig.DEBUG);
  11.  
  12.     }
  13.  
  14.  
  15.    
  16. }

Android图片上传下载总结与扩展

至此，简单的Android图片上传就完成了，图片的下载与只相似，只需要利用Xutils网络工具进行接口访问，拿到图片利用Glide或者其他方式进行显示和应用即可。

图片的上传下载与一些文件的上传下载类似，本demo只进行了单图上传的实例，实际上pictureSelector工具类十分强大，对于多图多选，图片压缩，视频选取都可以一句代码搞定，这样就可以很方便的实现多图上传，视频上传等其他功能，前提是后端小伙伴提供给你的接口支持相关上传下载。

感谢大家的阅读，有说明不到位的地方或者不足的地方欢迎指出评论

最后别忘记点个关注哦

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/530017
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。