MUI 单图片压缩上传（拍照+系统相册）

Posted 2020-09-06 依然范儿特西

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MUI 单图片压缩上传（拍照+系统相册）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <link href="../css/mui.min.css" rel="stylesheet" />  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/jquery-1.9.min.js"></script>  
        <style>  
            .imageup{ position: absolute; margin:auto;left:0px;top:0;right:0;bottom:0; width:100px; height: 36px;}  
        </style>  
    </head>  
    <body>  
        <a href="javascript:;" class="imageup">上传图片</a>  
        <script>  
            
            function plusReady(){  
                // 弹出系统选择按钮框  
                mui("body").on("tap",".imageup",function(){  
                    page.imgUp();  
                })  
                  
            }  
            var page=null;  
            page={  
                imgUp:function(){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"从相册中选择"}  
                    ]}, function(e){//1 是拍照  2 从相册中选择  
                        switch(e.index){  
                            case 1:clickCamera();break;  
                            case 2:clickGallery();break;  
                        }  
                    });  
                }  
                //摄像头  
            }  
              
              
     //发送照片  
    function clickGallery() {  
        plus.gallery.pick(function(path) {  
            plus.zip.compressImage({  
                src: path,  
                dst: "_doc/chat/gallery/" + path,  
                quality: 20,  
                overwrite: true  
            }, function(e) {  
                //服务端接口路径
                var server = "http://www.test.cn/aaa.php";
                //打开等待旋转提示按钮
                var wt=plus.nativeUI.showWaiting();
                var task = plus.uploader.createUpload(server, {  
                    method: "post"  
                    }, function(t, status) {  
                        if(status == 200) { 
                            alert("上传成功："+t.responseText);
                                wt.close(); //关闭等待提示按钮
                        }else{
                            alert("上传失败："+status);
                            wt.close();//关闭等待提示按钮
                        }
                    });  
                task.addFile(e.target, {}); 
                //添加其他参数
                task.addData("name","test");
                task.start();  
            }, function(err) {  
                console.error("压缩失败：" + err.message);  
            });  
  
        }, function(err) {});  
    };  
      
      
    // 拍照  
    function clickCamera() {  
        var cmr = plus.camera.getCamera();  
        var res = cmr.supportedImageResolutions[0];  
        var fmt = cmr.supportedImageFormats[0];  
        cmr.captureImage(function(path) {  
            
            plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                var localUrl = entry.toLocalURL();  
                plus.zip.compressImage({  
                    src: localUrl,  
                    dst: "_doc/chat/camera/" + localUrl,  
                    quality: 20,  
                    overwrite: true  
                }, function(e) {  
                    //服务端接口路径
                    var server = "http://www.test.cn/aaa.php";
                    //打开等待旋转提示按钮
                    var wt=plus.nativeUI.showWaiting();
                    var task = plus.uploader.createUpload(server, {  
                        method: "post"  
                    }, function(t, status) {  
                        if(status == 200) { 
                            alert("上传成功："+t.responseText);
                                wt.close(); //关闭等待提示按钮
                        }else{
                            alert("上传失败："+status);
                            wt.close();//关闭等待提示按钮
                        }
                    });  
                    task.addFile(e.target, {});  
                    //添加其他参数
                    task.addData("name","test");
                    task.start();  
                }, function(err) {  
                    console.log("压缩失败：  " + err.message);  
                });  
            });  
        }, function(err) {  
            console.error("拍照失败：" + err.message);  
        }, {  
            index: 1  
        });  
    };  
  
      
     if(window.plus){  
        plusReady();  
    }else{  
        document.addEventListener("plusready",plusReady,false);  
    }       
      
     
        </script>  
    </body>   
</html>

2 服务端文件（PHP）

<?php 

echo "<pre>";
print_r($_POST);

print_r($_FILES);


 ?>

测试结果如图：

以上是关于MUI 单图片压缩上传（拍照+系统相册）的主要内容，如果未能解决你的问题，请参考以下文章

iOS 使用AFN 进行单图和多图上传摄像头/相册获取图片，压缩图片

h5+ 上传图片（选择图片拍照）

Android拍照调用系统相册仿微信封装总结,治疗各种崩溃,图片横竖问题压缩等问题。

mui 获取本地的图片的绝对路径本，上传到OSS上

安卓开发从本地相册或拍照上传图片