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

╰+攻爆jí腚メ 2022-01-16 06:11 261阅读 0赞

mui(".img ul").on("tap", "li.addImgge", function() {
        if (mui.os.plus) {
            var a = [{
                title: "拍照"
            }, {
                title: "从手机相册选择"
            }];
            plus.nativeUI.actionSheet({
                title: "请选择图片来源",
                cancel: "取消",
                buttons: a
            }, function(b) { /*actionSheet 按钮点击事件*/
                switch (b.index) {
                    case 0:
                        break;
                    case 1:
                        getImage(); /*拍照*/
                        break;
                    case 2:
                        galleryImg(); /*打开相册*/
                        break;
                    default:
                        break;
                }
            })
        }
    })

//拍照
    function getImage() {
    　　var c = plus.camera.getCamera();
    　　c.captureImage(function(e) {
    　　　　plus.io.resolveLocalFileSystemURL(e, function(entry) {
    　　　　　　uploadHead(entry.toLocalURL(), entry.name); /*上传图片*/
    　　　　}, function(e) {
    　　　　　　console.log("读取拍照文件错误：" + e.message);
    　　　　});
    　　}, function(s) {
    　　　　console.log("error" + s);
    　　})
    }
    //相册
    function galleryImg() {
    　　plus.gallery.pick(function(paths) {
    　　　　for (i in paths.files) {
    　　　　　　uploadHead(paths.files[i], ""); /*上传图片*/
    　　　　}
    　　}, function(e) {
    　　　　mui.toast('取消了选择');
    　　}, {
    　　　　multiple: true,
    　　　　maximum: 9
    　　})
    }

这是调用本地的相册和相机,下面就是上传，在上传之前先把图片压缩为base64为编码格式，在用blob转化为arrayBuffer在上传

var imgBase64=[];
    var imgBaseUrl=[];
    function uploadHead(imgPath, imgName) {
        var image = new Image();
        image.src = imgPath;
        var li = document.createElement("li");
        var img = document.createElement("img");
        li.setAttribute("class","feedbackimg");
        li.index=mui(".img ul li").length;
        img.src = imgPath;
        li.appendChild(img);
         
        //alert(mui(".img ul")[0].innerHTML)
        if(mui(".img ul li").length>="6"){
            mui(".img ul li.addImgge")[0].style.display="none";
        }else{
            mui(".img ul")[0].appendChild(li);
            if(mui(".img ul li").length>="6"){
                mui(".img ul li.addImgge")[0].style.display="none";
            }
        }
        image.onload = function() {
             
            getCanvasBase64(imgPath).then(function(base640) {
                imgBase64[imgBase64.length]=base640;
                 
            }, function(err) {
                console.log(err);
            });
        }
    }
    var deleteImg = (t) => {
         
        var index=t.index;
        imgBase64.splice((index-1),1);
        $($(".img ul li")[index]).remove();
    }
     
        mui(".button").on("tap", "button", function() {
                mui(".mui-loading")[0].style.display="block";
                for(let i=0;i<imgBase64.length;i++){
                    var urlData = imgBase64[i];
                    var base64 = urlData.split(',').pop();
                    var fileType = urlData.split(';').shift().split(':').pop();
                    blob = toBlob(base64, fileType);
                     
                     
                    // blob转arrayBuffer
                    const reader = new FileReader();
                    reader.readAsArrayBuffer(blob);
                    reader.onload = function(event) {
                     
                        // 配置
                        var client = new OSS.Wrapper({
                            region: 'oss-cn-hangzhou', //你的oss地址
                            accessKeyId: '', //你的ak
                            accessKeySecret: '', //你的secret
                            secure: true,
                            //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注销掉
                            bucket: 'XXX' //你的oss名字
                        });
                     
                        // 文件名
                        var objectKey = `/AndroidApp/${new Date().getTime()}.${fileType.split('/').pop()}`;
                     
                        // arrayBuffer转Buffer
                        var buffer = new OSS.Buffer(event.target.result);
                     
                        // 上传
                        client.put(objectKey, buffer).then(function(result) {
                             
                            imgBaseUrl[imgBaseUrl.length]=result.url;
                            /* e.g. result = {
                                name: "Uploads/file/20171125/1511601396119.png",
                                res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
                                url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
                            } */
                        }).catch(function(err) {
                            console.log(err);
                        });
                    }
                }
                 
             
                })
    function getBase64Image(img, width, height) {
        var canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
    }
     
    function getCanvasBase64(img) {
        var image = new Image();
        //至关重要
        image.crossOrigin = '';
        image.src = img;
        //至关重要
        var deferred = $.Deferred();
        if (img) {
            image.onload = function() {
                deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
                //document.getElementById("container2").appendChild(image);
            }
            return deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']
        }
    }
     
    function toBlob(urlData, fileType) {
        let bytes = window.atob(urlData);
        let n = bytes.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bytes.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: fileType
        });
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 springboot上传图片到本地

springboot上传图片到本地简介：本文讲解，如何使用springboot，将代码上传到本地的某个特定的文件夹。项目的演示文件，在这个地址：https://gi

妖狐艹你老母/ 2024年03月04日 08:04/ 0 赞/ 134 阅读

相关 ueditor上传图片到阿里云OSS

最近在完成小程序需求的时候，需要使用ueditor上传图片，但是图片不想存放本地，想要传到阿里云OSS上，所以我就百度了下，结果还是看到可以参考到地方，今天跟大家分享

ゝ一世哀愁。/ 2023年07月13日 13:32/ 0 赞/ 20 阅读

相关 oss批量上传工具_使用oss批量上传图片

set\_time\_limit(0); // 引入自动加载类 // 确保路径是否正确 require\_once 'autoload.php'; // 确定参数需要

我就是我/ 2023年01月09日 12:45/ 0 赞/ 192 阅读

相关【OSS】使用Element实现图片上传到OSS

![20210409172819638.png][] 1.1、原生 [https://oss.console.aliyun.com/overview][https_os

Love The Way You Lie/ 2022年11月17日 13:44/ 0 赞/ 228 阅读

相关 springboot oss图片上传

-------------------- springboot oss图片上传官网：[https://help.a

左手的ㄟ右手/ 2022年09月04日 03:54/ 0 赞/ 290 阅读

相关 Ueditor本地上传图片加入前缀，变成绝对路径

node 项目简单说一下，需要node版本的，github上面可以找到 “ node ueditor” ueditor 下面的nodejs中的 config.

灰太狼/ 2022年07月16日 10:11/ 0 赞/ 180 阅读

相关 Java获取网络图片上传到OSS

OSS不支持通过一个网络地址来上传图片，所以若想将网络上的图片上传到OSS上需要走点弯路。 1：通过链接将图片下载到本地的一个文件夹下面 2：用OSS上传该文件夹下的文件

╰+哭是因爲堅強的太久メ/ 2022年06月01日 08:07/ 0 赞/ 213 阅读

相关图片上传到阿里云oss保存

互联网新时代，除了纯信息展示类的网站，基本都是有文件上传功能的。但是随着业务的发展，如果上传的文件和数据库都和网站程序源代码放在一起，那是有相当多的弊端的。 1：用户体验比较

r囧r小猫/ 2022年05月29日 03:51/ 0 赞/ 448 阅读

相关 URL图片上传到OSS服务器

方案先缓存到本地，再放到服务器 package com.duodian.youhui.admin.utils; import com.duo

墨蓝/ 2022年03月26日 14:08/ 0 赞/ 368 阅读

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

mui(".img ul").on("tap", "li.addImgge", function() { if (mui.os.plus) {

╰+攻爆jí腚メ/ 2022年01月16日 06:11/ 0 赞/ 262 阅读