H5單張、多張圖片保存續篇

前言

這篇是接上篇內容。還沒看的可以看H5單張、多張圖片上傳這篇文章預熱。

 

圖片入庫

本章我們就來看看如何讓多種圖片保存至數據庫中。數據庫：mysql   后端：.NET Core

我們回顧一下上篇我們給出的Html結構

        <form method="post" class="form-horizontal submitClubData auto-refresh" enctype="multipart/form-data" asp-action="UpdateClubs">
            <div class="row">
               <div class="col-xs-10 col-sm-8 mTop5">
                 <label title="上傳俱樂部相冊" for="ClubImagesUpload" id="btnClubImg" class="col-sm-2"><input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">
                       <img src="/Images/registerNewSite/btn_addimg.png" class="addImg"/>
                  </label>
              </div>
          </div>

           <div class="row">
                <div class="col-xs-9">
                      <div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm"></div>
                 </div>
            </div>
        <form/>

 首先，我們肯定的有個數據表 用於存儲我們的imgage信息。給用於存儲二進制的字段命名image

注意image類型為mediumblob。這幾種類型的區別是存儲容量的大小：

MySQL的四種BLOB類型
類型 大小(單位：字節)
TinyBlob 最大 255
Blob 最大 65K
MediumBlob 最大 16M
LongBlob 最大 4G

接着，我們需要定義實體Model

/// <summary>
/// add club images
/// </summary>
public IList<IFormFile> ClubImagesUpload { get; set; }

然后是進行表單提交 注意type=submit

 $(".submitClubData").submit(function (e) {
            var layerMsg = layer.load(1,
                {
                    icon: 1,
                    shade: [0.3]
                });
            e.preventDefault();

            var form = $(this);
            var url = form.attr('action');
            var formData = new FormData(this);
            var refresh = form.hasClass('auto-refresh');

            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    layer.closeAll();
                    if (data.isSuccess) {
                        layer.msg('保存成功');
                        if (refresh) {
                            window.setTimeout(function () { location.reload() }, 1000);
                        } else {
                            form.find('.close_model_button').click();
                        }
                    } else {
                        layer.msg(data.failMessage);
                    }
                }
            });

        });

然后 通過表單提交了，我們就可以將頁面數據以對象形式post至控制器中：

 public async Task<IActionResult> UpdateClubs(實體類 model)
{ 
       OperationResult result=new OperationResult();

       model.ClubsImageData = ThumbnailListImageData(model.ClubImagesUpload, 128, 128);//將FormFile文件轉換為byte數組
    
       result.IsSuccess = await _crewManager.UpdateClub(model);
       return result;
}

 private List<byte[]> ThumbnailListImageData(IList<IFormFile> files, int width, int height)
        {
            List<byte[]> result=new List<byte[]>();
            if ((files == null) || (files.Count == 0))
            {
                return null;
            }

            Parallel.ForEach(files.Take(9), new ParallelOptions() {MaxDegreeOfParallelism = 5}, item =>
            {
                try
                {
                    if ((item != null) && (item.Length > 0))
                    {
                        using (var stream = new MemoryStream((int)item.Length))
                        {
                            item.CopyTo(stream);
                            var source = Image.FromStream(stream);
                            var thumbnail = source.GetThumbnailImage(width, height, ThumbnailCallback, IntPtr.Zero);
                            using (var outputStream = new MemoryStream())
                            {
                                thumbnail.Save(outputStream, System.Drawing.Imaging.ImageFormat.Png);
                                result.Add(outputStream.ToArray());

                            }
                        }
                    }
                }
                catch (Exception e)
                {
                    _logger.LogError($"ThumbnailListImageData Error:{e.Message}");
                    throw;
                }
            });
            return result;
        }

通過這個控制器，我們得到了存有byte的圖片集合，現在，我們只需要將這些圖片放入數據庫中即可

        public async Task<bool> UpdateClub(int regattaId, 實體集合clubDetail)
        {
               var flag = false;
　　　　　　　　　using (var conn = GetMySqlConnection(regattaId))
                {

                    if (conn.State == ConnectionState.Closed)
                    {
                        await conn.OpenAsync();
                    }

                    using (var transaction = conn.BeginTransaction())
                    {
                        try
                        {
　　　　　　　　　　　　　　　　　　　　　　　　//因為前台有隊上傳圖片個數有限制，所以數量不多，這里我們直接使用循環插入的方式
                                            foreach (var item in clubDetail.ClubsImageData)
                                            {
                                                const string sqlFour =
                                                    @"insert into clubinfo_image(clubinfo_id,image,isvalid) values(@clubInfoId,@clubimage,@_isvalid);
                                                        select max(id) from clubinfo_image;";
                                                var clubimageMaxId = (await conn.QueryAsync<int>(sqlFour, new
                                                {
                                                    clubInfoId = clubInfoId,
                                                    clubimage = item,
                                                    _isvalid = true,
                                                }, commandType: CommandType.Text)).FirstOrDefault();
                                            }

　　　　　　　　　　　　　　　　　　　　　　　　　　　　transaction.Commit();

　　　　　　　　　　　　　　　　　　　　　　　　　　　　flag = true;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　return flag;

                        }
                        catch (Exception ex)
                        {
                            _logger.LogError($"UpdateClub Error :{ex.Message}");
                            transaction.Rollback();
                            throw;
                        }

                    }
               }
          }

效果演示

 

溫馨提示 

如果是編輯，要讀取數據庫中這些byte數據，只需要通過

 Convert.ToBase64String(club.ImageData)//將byte轉換為Base64位字符串

如果有多張圖片，可以用一個List<string>存放，然后再前台依次展示即可：

                      <div class="row">
                        <div class="col-xs-9">
                            @foreach (var item in Model.ClubImageDataBase64)
                            {
                                <div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm" style="background-image: url('data:image/png;base64,@item');></div>
                            }
                        </div>
                    </div>

展示效果：

 

 

本文完～