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=\"width: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;
        }