图片上传及图片处理—–5+runtime技术栈

上一篇介绍了利用基础的js来处理。
这一节我们打算使用5+对单张图片压缩上传
1.图片选择

// 单图片选择
plus.gallery.pick(function(path){handPicture(path)},function(err){mui.toast("相册打开失败")},{}})
// 多图片选择
plus.gallery.pick(function(e){
    handPictureList(e.files)    
},function(err){mui.toast("相册打开失败")},{maximum:6,onmaxed:function(){plus.nativeUI.alert('最多只能选择6张图片');}}})
function handPictureList(files){
    for(var i in files){
        handPicture(files[i],i+1)
    }
}

2.图片大小判断

// 判断图片大小
function handPicture(path){
    plus.io.resolveLocalFileSystemURL(path, function( entry ) {
        // 可通过entry对象操作html等其他所有类型的文件 
        entry.file( function(file){
            // 该file同原生js中的file一样使用
            console.log(file.size)
            console.log(file.name)
            if(file.size>204800){
                // 压缩图片再上传
                compressPicture(path);
            } else {
                // 上传图片
                uploadPicture(path);
            }
        } );
    }, function ( e ) {
        mui.toast("读取文件失败。")
    } );
}

3.图片压缩上传

// 图片压缩(等比压缩即可)
function compressPicture(path) {
    plus.zip.compressImage({src:path,dst:"_doc/compress/"+path,quality:100,width:"1200px",overwrite:true,format:"jpg"},function(e){
        uploadPicture(e.target);
    },function(err){mui.toast("文件压缩出错了")})
}

// 图片上传
function uploadPicture(path){
    var task = plus.uploader.createUpload(uploadUrl, 
        { method:"POST",blocksize:204800,priority:10,timeout:10 },
        function ( t, status ) {
            if ( status == 200 ) { 
                // 处理上传成功之后的逻辑
                console.log(t.url);
            } else {
                console.log( "上传失败了。" + status );
            }
        }
    );
    task.addFile( "file", {key:path});
    // task.addData( "string_key", "string_value" );
    task.start();
}

4.多图片压缩上传
上面2，3两个步骤演示的是单张图片的上传步骤。对于多张图同时上传在第二个步骤的时候，我们需要对图片做并轨。为了保证图片顺序的同步。基于后台存储，如果后台为数组存储,则在我们传递的时候一般会把顺序数字加入第三个上传方法的返回中。之后再利用js重写数组的排序对上传的图片url列表进行排序。如果后台为文件表存储，则将顺序也带入后台即可。当然，我也不知道我说了什么，我给例子吧。免得被打。

var list=[{"id":1,min:"http://123.com/aaa.jpg",midde:"http://123.com/bbb.jpg",max:"http://123.com/ccc.jpg",origin:"http://123.com/ddd.jpg"},{"id":2,min:"http://123.com/aaf.jpg",midde:"http://123.com/bbf.jpg",max:"http://123.com/ccf.jpg",origin:"http://123.com/ddf.jpg"}]
var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }            
    } 
}
console.log(list.sort(compare("id")))

这个样子数组就被排序了，传输给后台的数据就是按照顺序处理了。展示也会是按照顺序的

图片上传及图片处理—–5+runtime技术栈

猜你喜欢