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 = "
"; $("#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;
        }
mui