form表单格式上传图片

本博客来源:https://blog.csdn.net/u010356768/article/details/79026565

添加依赖
compile 'com.zhihu.android:matisse:0.4.3' //上传图片依赖

 

前提要有以下依赖

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.github.bumptech.glide:glide:3.7.0'
 

xml添加权限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

//按钮
add_image.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        uploadImg();

    }
});

_____________________________________________________________________________________________________

/**
 * 选择图片
 */
private final int REQUEST_CODE_CHOOSE = 1;
private final int REQUEST_READ_EXTERNAL_STORAGE = 2;
private void uploadImg() {

    // 检查权限
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        // 6.0 及以上
        int permission = ActivityCompat.checkSelfPermission(getApplication(), Manifest.permission.READ_EXTERNAL_STORAGE);
        if (permission != PackageManager.PERMISSION_GRANTED) {
            // 未授权 提示和禁止
            if (ActivityCompat.shouldShowRequestPermissionRationale(this, Manifest.permission.READ_EXTERNAL_STORAGE)) {
                // 提示 请求权限
                ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, REQUEST_READ_EXTERNAL_STORAGE);
            } else {
                // 禁止 转到设置
                showToast("请打开外部存储权限");
                Intent intent = new Intent();
                intent.setAction("android.settings.APPLICATION_DETAILS_SETTINGS");
                intent.setData(Uri.fromParts("package", getPackageName(), null));
                startActivity(intent);
            }
            return;
        }
    }

    // 选择图片
    Matisse.from(this)
            .choose(MimeType.ofImage())
            .countable(true)
            .maxSelectable(4)//这里设置一次传几张图片
            .restrictOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED)
            .thumbnailScale(0.85f)
            .imageEngine(new MyGlideEngine1())//这里要写一个内部类
            .forResult(REQUEST_CODE_CHOOSE);
}

_________________________________________________________________________________________________

//内部类
class MyGlideEngine1 implements ImageEngine {

    @Override
    public void loadThumbnail(Context context, int resize, Drawable placeholder, ImageView imageView, Uri uri) {

        RequestOptions options = new RequestOptions()
                .centerCrop()
                .placeholder(placeholder)
                .override(resize, resize);

        Glide.with(context)
                .asBitmap()
                .load(uri)
                .apply(options)
                .into(imageView);
    }

    @Override
    public void loadGifThumbnail(Context context, int resize, Drawable placeholder, ImageView imageView, Uri uri) {

        RequestOptions options = new RequestOptions()
                .centerCrop()
                .placeholder(placeholder)
                .override(resize, resize);

        Glide.with(context)
                .asBitmap()
                .load(uri)
                .apply(options)
                .into(imageView);
    }

    @Override
    public void loadImage(Context context, int resizeX, int resizeY, ImageView imageView, Uri uri) {

        RequestOptions options = new RequestOptions()
                .centerCrop()
                .override(resizeX, resizeY)
                .priority(Priority.HIGH);

        Glide.with(context)
                .load(uri)
                .apply(options)
                .into(imageView);
    }

    @Override
    public void loadGifImage(Context context, int resizeX, int resizeY, ImageView imageView, Uri uri) {

        RequestOptions options = new RequestOptions()
                .centerCrop()
                .override(resizeX, resizeY)
                .priority(Priority.HIGH);

        Glide.with(context)
                .asGif()
                .load(uri)
                .apply(options)
                .into(imageView);
    }

    @Override
    public boolean supportAnimatedGif() {
        return true;
    }
}

____________________________________________________________________________________________________

//选择回来接收图片的方法

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if (resultCode == RESULT_OK) {
        switch (requestCode) {
            case REQUEST_CODE_CHOOSE:
                if (data == null) {
                    L.d("data == null");
                } else {
                    List<Uri> mSelected = Matisse.obtainResult(data);
                    L.d("mSelected:" + mSelected);
                    if (mSelected == null || mSelected.size() == 0) {
                        showToast("数据异常");
                    } else {
                         //调网络请求的方法
                        sctp(mSelected);
                    }
                }
                break;
            default:
                showToast("未处理的请求码");
                break;
        }
    }
}

——————————————————————————————————————————————————————

//网络请求

    private void sctp(final List<Uri> mSelected) {

        Map<String, RequestBody> parts = new HashMap<>(5);
        parts.put("token", RequestBody.create(MediaType.parse("text/plain"), sp.readString("refreshToken")));
        parts.put("orderNo", RequestBody.create(MediaType.parse("text/plain"), ddh));
        for (Uri item : mSelected) {
            File file = new File(getRealFilePath(this, item));//获取图片真是路径
            if (!file.exists()) {
                showToast("文件不存在\n" + item);
                continue;
            }

            parts.put("file\"; filename=\"" + file.getName(), RequestBody.create(MediaType.parse("image/*"), file));
        }


        L.d("内容:" + parts);
        showProgressDialog("","正在上传...",false);
        NetUtils.enqueue(API.list.tp(sp.readString("token"), parts), new MyCallback.HTTPCallback() {
            @Override
            public void callback(Headers headers, int code, String body) {
                dismissProgressDialog();
                L.d("code = " + code + ", body = " + body);
                if (code == 200) {
                    try {
                        JSONObject jsonObject = JSONObject.parseObject(body);
                        if (jsonObject.containsKey("code") && "10002".equals(jsonObject.getString("code"))) {
                            L.d("几万" + "不是10000");

                            L.d("个人信息登陆1");
                            String user = sp.readString("user");
                            String pwd = sp.readString("pwd");
                            final String mm = S.md5("计时配" + pwd);
                            Map<String, Object> params = new HashMap<>();
                            params.put("phone", user);//手机号
                            params.put("password", mm);//密码
                            L.d("内容:" + params);
                            final RequestBody body1 = RequestBody.create(MediaType.parse("application/json;charset=UTF-8"), JSON.toJSONString(params));

                            NetUtils.enqueue(API.list.denglu(body1), new MyCallback.HTTPCallback() {
                                @Override
                                public void callback(Headers headers, int code, String body) {
                                    L.d("code = " + code + ", body = " + body);
//                                                            dismissProgressDialog();
                                    if (code == 200) {
                                        //eb09f755a846a1d4014e3c0ceceda17c=计时配asd12345
                                        try {
                                            JSONObject jsonObject = JSONObject.parseObject(body);
                                            if ("success".equals(jsonObject.getString("status"))) {
                                                Gson gson = new Gson();
                                                com.sf.fczp.denglu.Bean bean = gson.fromJson(body, com.sf.fczp.denglu.Bean.class);

                                                sp.write("token", bean.getResult().getToken());
                                                sp.write("refreshToken", bean.getResult().getRefreshToken());
                                                sctp(mSelected);

                                            } else {
                                                showToast(jsonObject.getString("message"));

                                            }

                                        } catch (Exception e) {
                                            e.printStackTrace();
                                            L.e("登录失败===》纯登录异常");
                                            showToast("网络异常");
                                        }

                                    } else {
                                        boolean conn = Utils.isConn(BaoJiaShiGuZhi.this);
                                        if (conn) {
                                            L.e("登陆失败===》非200");
                                            showToast("网络异常");
                                        } else {
                                            showToast("网络异常");
                                        }
                                    }

                                }
                            });


                        } else {
                            if ("success".equals(jsonObject.getString("status"))) {

                                showToast(jsonObject.getString("message"));

                            } else {
                                showToast(jsonObject.getString("message"));

                            }

                        }

                    } catch (Exception e) {
                        e.printStackTrace();
                        L.e("接口失败===》纯请求异常");
                        showToast("网络异常");


                    }


                } else {
                    boolean conn = Utils.isConn(BaoJiaShiGuZhi.this);
                    if (conn) {
                        L.e("接口失败===》非200");
                        showToast("网络异常");


                    } else {
                        showToast("网络异常");

                    }
                }
            }
        });
    }

————————————————————————————————————————————————————————

//获取图片真实路径

public static String getRealFilePath( Context context, final Uri uri ) {
    if ( null == uri ) {
        return null;
    }

    final String scheme = uri.getScheme();
    String data = null;
    if ( scheme == null ) {
        data = uri.getPath();
    }
    else if ( ContentResolver.SCHEME_FILE.equals( scheme ) ) {
        data = uri.getPath();
    } else if ( ContentResolver.SCHEME_CONTENT.equals( scheme ) ) {
        Cursor cursor = context.getContentResolver().query( uri, new String[] { MediaStore.Images.ImageColumns.DATA }, null, null, null );
        if ( null != cursor ) {
            if ( cursor.moveToFirst() ) {
                int index = cursor.getColumnIndex( MediaStore.Images.ImageColumns.DATA );
                if ( index > -1 ) {
                    data = cursor.getString( index );
                }
            }
            cursor.close();
        }
    }
    return data;
}
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
API层接口写法
@Multipart
@POST("orderQuotation/insertImg")
Call<ResponseBody> tp(@Header("Authorization") String token, @PartMap Map<String, RequestBody> parts);
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在element form表单上传图片,可以通过使用element-ui的upload组件来实现。该组件提供了简单易用的上传图片功能。 首先,在Vue组件的template中添加upload组件: ```html <el-upload class="upload-demo" action="/file/upload" //设置上传地址 :on-success="handleSuccess" //设置上传成功的回调函数 :before-upload="beforeUpload" //设置上传前的回调函数 :file-list="fileList" //绑定上传的文件列表 multiple //设置是否支持多文件上传 :auto-upload="false" //设置是否自动上传 > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 然后,在Vue组件的script部分定义相关方法: ```javascript data() { return { fileList: [] //定义文件列表 }; }, methods: { handleSuccess(response, file, fileList) { //上传成功的回调函数 console.log(response); }, beforeUpload(file) { //上传前的回调函数 const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt500KB = file.size / 1024 < 500; if (!isJPG && !isPNG) { this.$message.error('只能上传jpg/png格式的图片'); } if (!isLt500KB) { this.$message.error('图片大小不能超过500KB'); } return (isJPG || isPNG) && isLt500KB; }, }, ``` 在以上代码中,我们通过设置action属性来指定文件上传的地址,通过on-success属性绑定上传成功时的回调函数handleSuccess,通过before-upload属性绑定上传前的回调函数beforeUpload来限制文件类型和文件大小。 其中,handleSuccess方法用于处理上传成功后的逻辑,比如展示上传成功的图片或者返回的图片链接。beforeUpload方法用于判断文件类型和文件大小是否符合要求,若不符合要求则会弹出错误提示。 最后,通过样式调整可以美化上传按钮和提示文字。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值