zoukankan      html  css  js  c++  java
  • mui 上传图片

    mui前端传输文件

    //上传图片
                document.getElementById('photo').addEventListener('tap', function(e) {
                    if (mui.os.plus) {
                        var buttonTit = [{
                            title: "拍照"
                        }, {
                            title: "从手机相册选择"
                        }];
                
                        plus.nativeUI.actionSheet({
                            title: "上传图片",
                            cancel: "取消",
                            buttons: buttonTit
                        }, 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) {
                            var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径                        
                            setHtml(imgSrc);
                            var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径 
                            newUrlAfterCompress = compressImage(imgSrc, dstname);
                            appendFile(dstname, imgSrc);
                        }, function(e) {
                            console.log("读取拍照文件错误:" + e.message);
                        });
                    }, function(s) {
                        console.log("error" + s);
                    }, {
                        filename: "_doc/camera/"
                    })
                }
                // 从相册中选择图片 
                function galleryImg() {
                    plus.gallery.pick(function(e) {
                        for (var i in e.files) {
                            var fileSrc = e.files[i];
                            setHtml(fileSrc);
                            var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径 
                            newUrlAfterCompress = compressImage(e.files[i], dstname);
                            appendFile(dstname, fileSrc);
                        }
                    }, function(e) {
                        console.log("取消选择图片");
                    }, {
                        filter: "image",
                        multiple: true,
                        maximum: 5,
                        system: false,
                        onmaxed: function() {
                            plus.nativeUI.alert('最多只能选择5张图片');
                        }
                    });
                }
                
                function setHtml(e) {
                    var divHtml = "<div class="a-add"><img src=" + encodeURI(e) +
                        " class="file_img" style="96px;height:96px"><img  src="../../images/remove.png" class="a-remove"></div>";
                    $("#imgDiv").prepend(divHtml);
                }
                //压缩图片,这个比较变态的方法,无法return 
                function compressImage(src, dstname) {
                    plus.zip.compressImage({
                            src: src,
                            dst: dstname,
                            overwrite: true,
                            quality: 20
                        },
                        function(event) {
                            return event.target;
                        },
                        function(error) {
                            console.log(error);
                            return src;
                        });
                }
                // 产生一个随机数 
                function getUid() {
                    return Math.floor(Math.random() * 100000000 + 10000000).toString();
                }

    var files = [];
    var index = 1;
    var newUrlAfterCompress;

    function appendFile(p, fileSrc) {
    files.push({
    name: "img" + index, //这个值服务器会用到,作为file的key
    path: p,
    fileSrc: fileSrc
    });
    index++;
    }

    //上传文件
                function upload() {
                    var url = ServerIp + "/api/upload/upload";
                    var task = plus.uploader.createUpload(url, {
                            method: "POST"
                        },
                        function(t, status) {
                            if (status == 200) {
                                $("#imgDiv").find(".a-add").remove();
                                files = [];
                                index = 1;
                            } else {
                                files = [];
                            }
                        }
                    );
                    //添加其他参数
                    for (var i = 0; i < files.length; i++) {
                        var f = files[i];
                        task.addFile(f.path, {
                            key: f.name
                        });
                    }
                    task.addData("business_id", confirm_id);
                    task.addData("business_type", "整改确认");
                    task.addData("item_id", _localStorage.getItem("record_id")); //记录表id
                    task.addData("file_type", 1);
                    task.addData("create_user", localStorage.getItem("realName"));
                    task.start();
                }

    后台接口设置

    [Route("upload"), HttpPost]
            public IHttpActionResult Upload()
            {
                bool result = false;
                int count = HttpContext.Current.Request.Files.Count;
                string filename = "";
                string compressname = "";
                try
                {
                    for (int i = 0; i < count; i++)
                    {
                        int l = HttpContext.Current.Request.Files["img" + (i + 1)].ContentLength;
                        byte[] buffer = new byte[l];
                        Stream s = HttpContext.Current.Request.Files["img" + (i + 1)].InputStream;
                        //System.Drawing.Bitmap image = new System.Drawing.Bitmap(s);
                        string imgname = Guid.NewGuid().ToString() + ".png";
                        string comname = Guid.NewGuid().ToString();
                        AliyunOSS.PutObject(bucketName, "不符合项/" + imgname, s);
                        // string path = "/UploadFile/upload/";
                        // string webPath = ConfigurationManager.AppSettings["UploadPath"].ToString(); //web下的绝对路径
                        //  filename = path + imgname + ".png";//大图相对路径及名字
                        // compressname = path + comname + ".png";//小图相对路径及名字
                        // string savePath = webPath + path + imgname + ".png";
                        // string comsavePath = webPath + path + comname + ".png";
                        //大图
                        //var bitImage = GetThumbnailImage(image, image.Width, image.Height);
                        //bitImage.Save(savePath, System.Drawing.Imaging.ImageFormat.Png);//保存
                        //小图
                        // var combitImage = GetThumbnailImage(image, 69, 69);
                        // combitImage.Save(comsavePath, System.Drawing.Imaging.ImageFormat.Png);//保存
                        #region 记录表
                        im_file file = new im_file();
                        file.id = Guid.NewGuid().ToString();
                        file.business_id = HttpContext.Current.Request.Form["business_id"];
                        file.business_type = HttpContext.Current.Request.Form["business_type"];
                        file.item_id = HttpContext.Current.Request.Form["item_id"];
                        // file.file_name = imgname + ".png";
                        file.file_name = "不符合项/" + imgname;
                        file.file_path = filename;
                        file.compressedfile_path = compressname;
                        file.file_type = 1;
                        file.create_user = HttpContext.Current.Request.Form["create_user"];
                        file.create_date = DateTime.Now;
                        _fileRepository.Insert(file);
                        #endregion
                        result = true;
                    }
                }
                catch (Exception e)
                {
                    result = false;
                }
                return Ok(result);
            }
    
            //图片压缩
            public static Image GetThumbnailImage(Image srcImage, int width, int height)
            {
                Image bitmap = new Bitmap(width, height);
                Graphics g = Graphics.FromImage(bitmap);
                //设置高质量插值法 
                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
                g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;
                //在指定位置并且按指定大小绘制原图片的指定部分 
                g.DrawImage(srcImage, new Rectangle(0, 0, width, width),
                    new Rectangle(0, 0, srcImage.Width, srcImage.Height),
                    GraphicsUnit.Pixel);
                return bitmap;
            }
  • 相关阅读:
    requets中urlencode的问题
    洛谷$P4503 [CTSC2014]$企鹅$QQ$ 哈希
    洛谷$P5446 [THUPC2018]$绿绿和串串 $manacher$
    洛谷$P5329 [SNOI2019]$字符串 字符串
    洛谷$P1390$ 公约数的和 欧拉函数
    洛谷$P4318$ 完全平方数 容斥+二分
    入门懵逼钨丝繁衍
    $ CometOJ-Contest#11 D$ $Kruscal$重构树
    洛谷$P4884$ 多少个1? 数论
    入门数论简单总结
  • 原文地址:https://www.cnblogs.com/yyjspace/p/12029987.html
Copyright © 2011-2022 走看看