使用localResizeIMG3+WebAPI實現手機端圖片上傳

時間 2019-11-11

標籤使用 localresizeimg3+webapi localresizeimg webapi 實現手機圖片上傳简体版

原文原文鏈接

前言

慣例~慣例~昨天發表的使用OWIN做爲WebAPI的宿主..嗯..有不少人問..是否是缺乏了什麼 - - 好吧,若是你要把OWIN寄宿在其餘的地方...代碼以下:html

namespace ConsoleTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string baseAddress = "http://localhost:9000/"; // 管道地址
            //開啓管道監聽
            WebApp.Start<Startup>(url: baseAddress);
            Console.WriteLine("開啓成功!");
            // Create HttpCient and make a request to api/values 
                ////建立HTTP客戶
                //HttpClient client = new HttpClient();
                //var response = client.GetAsync(baseAddress + "api/values").Result;
                //Console.WriteLine(response);
                //Console.WriteLine(response.Content.ReadAsStringAsync().Result);
            

            Console.ReadLine();
        }
    }
}

閒話很少說~讓咱們開始今天的內容,!前端

寫過上傳圖片的都知道,在HTML5沒出來之前,咱們作上傳圖片預覽,必需要先上傳到服務器,而後在由服務器來反饋給客戶端預覽,這樣..既不科學也會佔用大量的服務器資源.git

在BS迅速發展的今天,是時候來改變了..(咳咳,裝下B..)github

今天咱們主要的內容是使用HTML5實現本地預覽圖片,而後在使用localResizeIMG3+AJAX的形式把圖片傳到咱們昨天的WebAPI~而後存在服務器.web

介紹一下localResizeIMG3 嗯..這是一個開源框架..主要目的是:沒有蛀牙!!(咳咳,串戲了..),呃,是經過JS把圖片壓縮(可設置壓縮率)成base64字符串使其能夠經過AJAX參數的形式直接上傳.ajax

localResizeIMG3 的開源地址:https://github.com/think2011/localResizeIMG3/releasesjson

AJAX..WebAPI..須要我多說麼? - -,api

下面咱們來看實現效果:數組

說明:我這裏的壓縮率設置爲0.1..大家懂的..(好吧,不懂的話..其實就是我也說了手機端嘛,節省流量,~圖片質量還行吧..)服務器

正文開始

首先咱們來看看WebAPI的實現代碼~個人風格..大家懂的..不解釋太多,都在註釋裏了..

  [HttpPost]
        public List<string> DoSaveImages([FromBody]JObject imgJObject)
        {
            List<string> list = new List<string>();
            for (int i = 1; i < 4; i++)
            {
                string img = "img" + i;
                if (imgJObject.Value<JObject>(img).Value<int>("size") > 0)
                {
                    //獲取base64位數據流
                    var base64 = imgJObject.Value<JObject>(img).Value<string>("base64");
                    Regex reg = new Regex("data:image/(.*);base64,");
                    //正則替換
                    base64 = reg.Replace(base64, "");
                    //轉換爲byte數組
                    byte[] arr = Convert.FromBase64String(base64);
                    //轉換爲內存流
                    var ms = new MemoryStream(arr);
                    //轉換爲bitmap圖片對象
                    var bmp = new Bitmap(ms);
                    //生成圖片名稱
                    string dizhi = DateTime.Now.ToString("yyyyMMddHHmmssffff");
                    var path = GetMapPath("~/Upimages/") + dizhi + ".jpg";
                    //存入服務器
                    bmp.Save(path);
                    string website = "http://" + HttpContext.Current.Request.Url.Authority;
                    list.Add(website + "/Upimages/" + dizhi + ".jpg");

                }
            }
            return list;
            
        }

下面咱們來看看前端JS的代碼~(重點~)

首先咱們來看看HTML5直接客戶端預覽圖片的代碼:

 // 選擇圖片，讀取地址預覽的輔助函數
        //採用HTML5 FileReader接口 兼容IE9以上..
        function readURL(input, tmpimg) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                //註冊onload事件
                reader.onload = function (e) {
                    if (!/image/.test(e.target.result)) {
                        alert('請上傳圖片格式...');
                        return false;
                    }
                    tmpimg.attr('src', e.target.result);
                }
                //讀取文件成爲二進制流
                reader.readAsDataURL(input.files[0]);
            }
        }

好了,下面咱們來看看關鍵的上傳圖片的代碼:

  //定義多圖存儲數組
        var img_data = {

            img1: {
                base64: "",
                size: 0
            },
            img2: {
                base64: "",
                size: 0
            },
            img3: {
                base64: "",
                size: 0
            }
        }
        $(function () {
            $(".choseimg input").change(function () {
                var $me = $(this);
                var index = $(this).attr("img");
                var $img = $me.parent().find('img');
                readURL(this, $img);
                //使用LEZ轉換圖片
                lrz(this.files[0], {
                    quality: 0.1,      //設置壓縮率             
                    done: function (results) {
                        img_data[index].base64 = results.base64;
                        img_data[index].size = results.base64Len;
                        
                    }
                });
            });
        })
        //肯定上傳
        function Submit() {
            $.ajax({
                cache: true,
                type: "POST",
                url: 'api/Values/DoSaveImages',
                data: JSON.stringify(img_data)
                ,
                contentType: 'application/json',
                async: true,
                error: function (request) {
                    alert("出現異常,請聯繫客服");
                },
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#upimage").append(' <img src="' + data[i] + '" />');
                    }
                }
            });
        }