【手把手教】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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/coreGray"android:orientation="vertical"tools:context=".MainActivity"><include layout="@layout/layout_title"/><LinearLayoutstyle="@style/LoginLayoutStyle"android:layout_width="match_parent"><TextViewandroid:id="@+id/aaa"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="AAA:"android:textColor="@color/black60"android:textSize="20dp" /><com.tz.picturedemo.view.ClearEditTextandroid:id="@+id/qs_username2"style="@style/EditTextStyle"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入AAAA"android:inputType="text"android:lines="1"android:singleLine="true"android:textCursorDrawable="@null"app:regexType="name" /></LinearLayout><LinearLayoutstyle="@style/LoginLayoutStyle"android:layout_width="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="BBB:"android:textColor="@color/black60"android:textSize="20dp" /><com.tz.picturedemo.view.ClearEditTextandroid:id="@+id/qs_username3"style="@style/EditTextStyle"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入BBBB"android:inputType="text"android:lines="1"android:singleLine="true"android:textCursorDrawable="@null"app:regexType="name" /></LinearLayout><LinearLayoutstyle="@style/LoginLayoutStyle"android:layout_width="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="CCC:"android:textColor="@color/black60"android:textSize="20dp" /><com.tz.picturedemo.view.ClearEditTextandroid:id="@+id/qs_username"style="@style/EditTextStyle"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入CCCC"android:inputType="text"android:lines="1"android:singleLine="true"android:textCursorDrawable="@null"app:regexType="name" /></LinearLayout><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="上传图片"android:textColor="@color/black60"android:padding="10dp"android:textSize="20sp"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:paddingTop="20dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/picture1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_add_image"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingTop="10dp"android:text="正面"android:textColor="@color/black60"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/picture2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_add_image"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingTop="10dp"android:text="侧面"android:textColor="@color/black60"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/picture3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_add_image"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingTop="10dp"android:text="反面"android:textColor="@color/black60"android:textSize="18sp" /></LinearLayout></LinearLayout><Buttonandroid:id="@+id/makesure"android:layout_width="match_parent"android:layout_height="45dp"android:text="提交"android:layout_marginLeft="15dp"android:layout_marginRight="15dp"android:layout_marginTop="50dp"android:textSize="20dp"android:textColor="@color/white"android:background="@drawable/share_item_blue_bg"/>
</LinearLayout>我在此处为了界面美化，引用了一些第三方自定义view大家可自行替换成原生即可
Demo功能核心代码 MainActivity
package com.tz.picturedemo;import static com.luck.picture.lib.config.SelectMimeType.ofImage;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import com.alibaba.fastjson.JSON;
import com.bumptech.glide.Glide;
import com.luck.picture.lib.basic.PictureSelector;
import com.luck.picture.lib.config.PictureConfig;
import com.luck.picture.lib.config.SelectMimeType;
import com.luck.picture.lib.entity.LocalMedia;
import com.luck.picture.lib.interfaces.OnResultCallbackListener;
import org.xutils.common.Callback;
import org.xutils.http.RequestParams;
import org.xutils.x;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import okhttp3.Call;
import okhttp3.MediaType;
import okhttp3.MultipartBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;public class MainActivity extends AppCompatActivity implements View.OnClickListener {private ImageView mPicture1;private ImageView mPicture2;private ImageView mPicture3;private List<String> PictureArr=new ArrayList<>();private Button mBtn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN );//这句让view 顶到顶getWindow().setStatusBarColor(Color.TRANSPARENT);//这句让状态栏透明initVew();}private void initVew() {mPicture1=findViewById(R.id.picture1);mPicture2=findViewById(R.id.picture2);mPicture3=findViewById(R.id.picture3);mBtn=findViewById(R.id.makesure);mPicture1.setOnClickListener(this);mPicture2.setOnClickListener(this);mPicture3.setOnClickListener(this);mBtn.setOnClickListener(this);}@Overridepublic void onClick(View view) {switch (view.getId()) {case R.id.picture1:photoAndAll(mPicture1);break;case R.id.picture2:photoAndAll(mPicture2);break;case R.id.picture3:photoAndAll(mPicture3);break;case R.id.makesure:break;}}private void photoAndAll(ImageView imageView){PictureSelector.create(this).openGallery(SelectMimeType.ofImage()).setImageEngine(GlideEngine.createGlideEngine()).setMaxSelectNum(1).forResult(new OnResultCallbackListener<LocalMedia>() {@Overridepublic void onResult(ArrayList<LocalMedia> result) {Log.e("leo","图片路径"+result.get(0).getPath());Log.e("leo","绝对路径"+result.get(0).getRealPath());Glide.with(MainActivity.this).load(result.get(0).getPath()).into(imageView);//将bitmap图片传入后端//imageUpLoad(result.get(0).getRealPath());SubmitPicture(result.get(0).getRealPath());}@Overridepublic void onCancel() {Toast.makeText(MainActivity.this, "error", Toast.LENGTH_SHORT).show();}});}public static void imageUpLoad(String localPath) {MediaType MEDIA_TYPE_PNG = MediaType.parse("image/png");OkHttpClient client = new OkHttpClient();MultipartBody.Builder builder = new MultipartBody.Builder().setType(MultipartBody.FORM);File f = new File(localPath);builder.addFormDataPart("files", f.getName(), RequestBody.create(MEDIA_TYPE_PNG, f));final MultipartBody requestBody = builder.build();//构建请求final Request request = new Request.Builder().url("后端接口")//地址.post(requestBody)//添加请求体.build();client.newCall(request).enqueue(new okhttp3.Callback() {@Overridepublic void onFailure(Call call, IOException e) {System.out.println("上传失败:e.getLocalizedMessage() = " + e.getLocalizedMessage());}@Overridepublic void onResponse(Call call, Response response) throws IOException {pmodel model = JSON.parseObject(response.body().string(), pmodel.class);Log.e("leo",JSON.toJSONString(model));pmodel model2 = JSON.parseObject(JSON.toJSONString(model), pmodel.class);}});}private void SubmitPicture(String path){String url = "后端接口";String token="token，没有要求则无需写入";RequestParams params = new RequestParams(url);params.addHeader("Authorization",token);//设置表单传送params.setMultipart(true);params.addBodyParameter("file",new File(path));params.addParameter("fileType","PICTURE");x.http().post(params, new Callback.CommonCallback<String>() {@Overridepublic void onSuccess(String result) {Log.e("leo","2222"+params);Toast.makeText(MainActivity.this, "上传成功!", Toast.LENGTH_SHORT).show();Log.e("leo","返回"+result);pmodel model = JSON.parseObject(result, pmodel.class);PictureArr.add(model.getData().get(0).getUrl());}@Overridepublic void onError(Throwable ex, boolean isOnCallback) {Log.e("leo","失败"+ex.getMessage());}@Overridepublic void onCancelled(CancelledException cex) {}@Overridepublic void onFinished() {}});}}说明与解析：这边我们通过点击上传ImageView，则利用pictureSelector进行相册照片的选取，即photoAndAll方法进行选取，并且利用Glide（图片加载工具类）进行UI界面的显示，最后利用两种方法(imageUpload和SubmitPicture)提交上传图片，两种方法自行选取即可。
第三方pictureSelector的引入，以及Glide图片加载，xutils工具类的引入可参考如下：
// PictureSelector 基础 (必须)implementation 'io.github.lucksiege:pictureselector:v3.0.5'// 图片压缩 (按需引入)implementation 'io.github.lucksiege:compress:v3.0.5'// 图片裁剪 (按需引入)implementation 'io.github.lucksiege:ucrop:v3.0.5'// 自定义相机 (按需引入)implementation 'io.github.lucksiege:camerax:v3.0.5'// 加载网络图片implementation 'com.github.bumptech.glide:glide:4.10.0'annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'//网络请求implementation 'org.xutils:xutils:3.8.4'xutils工具的使用需要创建自定义Application进行初始化
public class BaseApplication extends Application {public static Handler sHandler;public static Context sContext = null;@Overridepublic void onCreate() {super.onCreate();//初始化xUtilsx.Ext.init(this);x.Ext.setDebug(BuildConfig.DEBUG);}}
Android图片上传下载总结与扩展
至此，简单的Android图片上传就完成了，图片的下载与只相似，只需要利用Xutils网络工具进行接口访问，拿到图片利用Glide或者其他方式进行显示和应用即可。
图片的上传下载与一些文件的上传下载类似，本demo只进行了单图上传的实例，实际上pictureSelector工具类十分强大，对于多图多选，图片压缩，视频选取都可以一句代码搞定，这样就可以很方便的实现多图上传，视频上传等其他功能，前提是后端小伙伴提供给你的接口支持相关上传下载。
感谢大家的阅读，有说明不到位的地方或者不足的地方欢迎指出评论
最后别忘记点个关注哦
springMVC实现多文件上传的方式有两种,一种是我们经常使用的以字节流的方式进行文件上传,另外一种是使用springMVC包装好的解析器进行上传.这两种方式对于实现多文件上传效率上却有着很大的差距 ... 释放双眼,带上耳机,听听看~! 相信很多程序员在开发程序的时候都会遇到短信调用端口的情况,今天是技术狗小编为大家带来的关于android之两种方式调用短信发送接口,希望对你学习这方面知识有帮助! an ... 导读:微软的Office在2007及以后的版本中,对可撤消(可撤销--六分办公注:实际上应为撤销,微软官方称之为撤消)次数默认为100次,如果要增加可撤消(可核销)次数,PowerPoint有两种方法 ... 我们一般都是使用第三方云存储服务来管理图片,图片并不保存在本地,这样的结构,为后台的开发人员省去了很多精力.目前的云存储服务对资源的管理也非常便捷技术也相对成熟,这里我就介绍下目前用的比较多的的七牛云 ... 1.项目中遇到了许多处理图片的时候.可以直接拿过来使用.很实用.项目中用到了android 开源框架com.loopj.android.http 非常适用方便 2.以下是demo ... javaweb项目文件的上传和下载 在进行文件的上传和下载之前,我们先把javaweb项目做一点点的改动,那就是将LoginServlet的跳转由原来的forward方式改为 redirect方式 ... http://www.cnblogs.com/android100/p/Android-get-ip.html 1.使用WIFI 首先设置用户权限 Xml代码 <uses-permissio ... 有钱的朋友上我的CSDN去奉献点分吧,极品资源很多哦!:http://download.csdn.net/user/devgis提供本文代码下载,有更多代码! 问题: 1.在一条街上,有5座房子,喷了 ... <template><view><button type="primary" @click="chooseImg">上传图片 ...【手把手教】Android开发两种方式实现图片的上传下载相关推荐
最新文章
热门文章