8***@qq.com
8***@qq.com
  • 发布:2019-09-29 18:26
  • 更新:2024-03-21 11:07
  • 阅读:2335

mui上传图片案例

分类:MUI
h5+

本案例是上传图片案例,可以进行图片选择和拍照操作。
使用时主要修改有以下几个:
1、var head_pho = document.getElementById('head_pho');这里修改成获取事件id
2、task.addData('token', token); 在此可以设置参数
3、task.addFile(filepath, { key: "personImage" }); filepath为图片路径,key是服务端接收图片的参数
4、plus.uploader.createUpload 在这里设置成服务端上传图片接口
以下为代码

var head_pho = document.getElementById('head_pho');  
mui.plusReady(function() {  
    // 文件路径  
    var filepath;  
    head_pho.addEventListener('tap', function() {  
        if (mui.os.plus) {  
            var a = [{  
                title: '拍照'  
            }, {  
                title: '从手机相册选择'  
            }];  
            plus.nativeUI.actionSheet({  
                title: '修改头像',  
                cancel: '取消',  
                buttons: a  
            }, function(b) {  
                switch (b.index) {  
                    case 0:  
                        break;  
                    case 1:  
                        //拍照  
                        getImages();  
                        break;  
                    case 2:  
                        //打开相册  
                        galleryImages();  
                        break;  
                    default:  
                        break;  
                }  
            }, false);  
        }  
    });  

    //拍照  
    function getImages() {  
        var mobileCamera = plus.camera.getCamera();  
        mobileCamera.captureImage(function(e) {  
            plus.io.resolveLocalFileSystemURL(e, function(entry) {  
                var path = entry.toLocalURL() + '?version=' + new Date().getTime();  
                var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径    
                compressImage(path, dstname, 0);  
            }, function(err) {  
                console.log("读取拍照文件错误");  
            });  
        }, function(e) {  
            console.log("er", err);  
        }, function() {  
            filename: '_doc/head.png';  
        });  
    }  

    //从本地相册选择  
    function galleryImages() {  
        plus.gallery.pick(function(a) {  
            plus.io.resolveLocalFileSystemURL(a, function(entry) {  
                plus.io.resolveLocalFileSystemURL('_doc/', function(root) {  
                    root.getFile('head.png', {}, function(file) {  
                        //文件已经存在  
                        file.remove(function() {  
                            console.log("文件移除成功");  
                            entry.copyTo(root, 'head.png', function(e) {  
                                var path = e.fullPath + '?version=' + new Date().getTime();  

                                var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径    
                                compressImage(path, dstname, 270);  
                            }, function(err) {  
                                console.log("copy image fail: ", err);  
                            });  
                        }, function(err) {  
                            console.log("删除图片失败:(" + JSON.stringify(err) + ")");  
                        });  
                    }, function(err) {  
                        //打开文件失败  
                        entry.copyTo(root, 'head.png', function(e) {  
                            var path = e.fullPath + '?version=' + new Date().getTime();  
                            uploadHeadImg(path);  
                        }, function(err) {  
                            console.log("上传图片失败:(" + JSON.stringify(err) + ")");  
                        });  
                    });  
                }, function(e) {  
                    console.log("读取文件夹失败:(" + JSON.stringify(err) + ")");  
                });  
            });  
        }, function(err) {  
            console.log("读取拍照文件失败: ", err);  
        }, {  
            filter: 'image'  
        });  
    }  

    // 产生一个随机数    
    function getUid() {  
        return Math.floor(Math.random() * 100000000 + 10000000).toString();  
    }  

    // 上传操作  
    function upload() {  
        var task = plus.uploader.createUpload(getUrl() + 'com_uploadPersonImage.action', {  
                method: "POST"  
            },  
            function(t, status) { //上传完成    
                if (status == 200) {  
                    console.log(t.responseText);  
                    // imgdiv.innerHTML = '<img id="userImg" src="' + t.responseText + '"/>';  
                } else {  
                    console.log("上传失败:" + status);  
                }  
            });  
        task.addData('token', token);  
        task.addFile(filepath, {  
            key: "personImage"  
        });  
        task.start();  
    }  

    // 进行图片压缩  
    function compressImage(src, dstname, rotate) {  
        plus.zip.compressImage({  
                src: src,  
                dst: dstname,  
                overwrite: true,  
                quality: 20,  
                rotate: rotate  
            },  
            function(event) {  
                console.log("Compress success:" + event.target);  
                filepath = event.target;  
                upload();  
            },  
            function(error) {  
                console.log(error);  
            });  
    }  
})
0 关注 分享

要回复文章请先登录注册

1***@163.com

1***@163.com

task.addFile可以使用网络图片地址吗?
2024-03-21 11:07