webAPP 圖片上傳

 關於webAPP 手機上傳  

用的vue.js

首先是js代碼

調用手機app 的 相冊或者自己拍照

upload: function(index) { //上傳
                        this.index = index
                        //顯示菜單
                        mui('#sheet').popover('toggle');
                    },
                    camera: function() { //拍照
                        var that = this;
                        //顯示菜單
                        mui('#sheet').popover('toggle');
                        plus.camera.getCamera().captureImage(function(path) { //成功
                            uploadSvc.upImage(path, function(data) {
                                data=JSON.parse(data);
                                if(data.Result.Id && data.Result.Url) {
                                    that.formData.Paras[that.index].DefaultVal = data.Result.Id;
                                    that.formData.Paras[that.index].FileUrl = data.Result.Url;
                                }
                            });
                        })
                    },
                    gallery: function() { //相冊選擇
                        var that = this;
                        //顯示菜單
                        mui('#sheet').popover('toggle');
                        plus.gallery.pick(function(path) { //成功            
                            uploadSvc.upImage(path, function(data) {
                                data=JSON.parse(data);
                                if(data.Result.Id && data.Result.Url) {
                                    that.formData.Paras[that.index].DefaultVal = data.Result.Id;
                                    that.formData.Paras[that.index].FileUrl = data.Result.Url;
                                }
                            });
                        }, function(e) { //失敗
                            console.log("取消選擇圖片");
                        }, {
                            filter: "image",
                            maximum: 1,
                            multiple: false
                        })
                    }

//上傳圖片
    _self.upImage = function(path,callback){
        var serverUrl=systemSvc.resolveUrl('api_v1/UpFileApi/UploadImg');

        var wt=plus.nativeUI.showWaiting();
        //開始上傳任務
        var task=plus.uploader.createUpload(serverUrl,{
            method:'post',
            timeout:15000,
            blocksize:0
        },function(t,s){
            console.log(JSON.stringify(t));
            console.log(s);
            if (s==200) {
                callback(t.responseText)
                mui.toast("上傳成功");
            }else{
                mui.toast("上傳失敗");
            }
            wt.close();
        });
        task.addFile(path,{key:"file"});
        task.start();        
    };

后台接收坑挺多的， 踩了一上午

var request = HttpContext.Current.Request;
            //文件流
            var stream = request.Files["file"].InputStream;
            //文件類型
            var mime = request.Files["file"].ContentType;
            //保存為byte數組
            byte[] imgBytes =new byte[stream.Length];
            stream.Read(imgBytes, 0, imgBytes.Length);
            stream.Seek(0, SeekOrigin.Begin);

 后台接收圖片

 

 如果用這個獲取字節流

var data = Request.Content.ReadAsByteArrayAsync();

 獲取的是所有的數據的 字節流 不只有圖片數據的字節流    還有你的一些參數的字節流 

然后轉換成圖片的時候是沒用的