Asp.Net Core Web Api圖片上傳(一)集成MongoDB存儲實例教程

時間  2019-11-11
標籤 asp.net asp core web api 圖片 上傳 集成 mongodb 存儲 實例 教程 欄目 ASP 简体版
原文   原文鏈接

Asp.Net Core Web Api圖片上傳及MongoDB存儲實例教程（一）

圖片或者文件上傳相信你們在開發中應該都會用到吧，有的時候還要對圖片生成縮略圖。那麼如何在Asp.Net Core Web Api實現圖片上傳存儲以及生成縮略圖呢？今天我就使用MongoDB做爲圖片存儲，而後使用SixLabors做爲圖片處理，經過一個Asp.Net Core Web Api實例來給你們講解下！本文有點長，能夠先收藏推薦而後再看！
本文地址：http://www.javashuo.com/article/p-zrjibmdm-n.html
做者：yilezhuhtml

寫在前面

閱讀本文章，須要你具有asp.net core的基礎知識，至少可以建立一個Asp.Net Core Web Api項目吧！其次，我不會跟你說MongoDB是什麼以及爲何選擇MongoDB做爲文件存儲這樣的問題，由於百度百科已經給你說了， MongoDB 是一個基於分佈式文件存儲的數據庫。實在不清楚的話本身去看百度百科吧！git

MongoDB在Windows下的下載安裝以及配置

你能夠從MongoDB官網下載安裝。下載地址：https://www.mongodb.com/download-center#community 。以下圖所示：github

MongoDB下載

下載以後一路next基本就能完成。固然仍是給新手朋友一些圖文操做吧。已經會安裝的朋友能夠跳過這一節往下看。web

MongoDB安裝

MongoDB服務配置

一路next，而後安裝出現最後安裝成功的界面，點擊Finish便可。mongodb

MongoDB安裝完成

而後，Win+R 運行，輸入services.msc 而後輸入Enter鍵。打開以下的服務窗口數據庫

MongoDB服務
雙擊上面圈起來的MongoDB服務，能夠看到以下參數命令json

MongoDB啓動參數

"C:\Program Files\MongoDB\Server\4.0\bin\mongod.exe" --config "C:\Program Files\MongoDB\Server\4.0\bin\mongod.cfg" --service

上面表示，MongoDB做爲服務的方式進行啓動，而且按照 --Config後面的路徑裏面的配置文件裏的配置進行啓動。c#

咱們找到這個配置文件，並打開看下吧！windows

MongoDB配置

你能夠從新設置參數後，而後從新啓動服務便可生效！
最後，讓咱們瀏覽器打開上面設置的IP以及端口號查看一下，以下圖所示，表示MongoDB安裝成功！api

MongoDB安裝成功

Asp.Net Core Web Api圖片上傳的代碼實現

  1. 新建Asp.Net Core Web Api項目
    這裏我不會教你怎麼建立一個Asp.Net Core Web Api項目了。建立好後會出現以下圖所示的結構

目錄結構

  1. 安裝MongoDB的nuget包以及SixLabors圖片處理的包

    Install-Package MongoDB.Bson -Version 2.7.0
Install-Package MongoDB.Driver -Version 2.7.0
    Install-Package SixLabors.ImageSharp -Version 1.0.0-beta0004
Install-Package SixLabors.ImageSharp.Drawing -Version 1.0.0-beta0004

  2. 在appsettings.json中加入MongoDBHost的配置，以下所示，端口以及ip上面咱們已經配置過了

    {
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "MongodbHost": {
    "Connection": "mongodb://127.0.0.1:27017",
    "DataBase": "File_Server",
    "Table": ""
  },
  "PictureOptions": {
    "FileTypes": ".gif,.jpg,.jpeg,.png,.bmp,.GIF,.JPG,.JPEG,.PNG,.BMP",
    "MaxSize": 1048576,
    "ThumsizeW": 200,
    "ThumsizeH": 140,
    "MakeThumbnail": true,
    "ThumbnailGuidKeys": "yilezhu",
    "ImageBaseUrl": "http://localhost:5002/api/Picture/Show/"
  }
}

  3. 既然有了配置，確定要建立對應的Options了。MongodbHostOptions以及PictureOptions的代碼以下所示：

public class MongodbHostOptions
    {
        /// <summary>
        /// 鏈接字符串
        /// </summary>
        public string Connection { get; set; }
        /// <summary>
        /// 庫
        /// </summary>
        public string DataBase { get; set; }
        /// <summary>
        /// 表
        /// </summary>
        public string Table { get; set; }
    }
public class PictureOptions
    {
        /// <summary>
        /// 容許的文件類型
        /// </summary>
        public string FileTypes { get; set; }
        /// <summary>
        /// 最大文件大小
        /// </summary>
        public int MaxSize { get; set; }
        /// <summary>
        /// 縮略圖寬度
        /// </summary>
        public int ThumsizeW { get; set; }
        /// <summary>
        /// 縮略圖高度
        /// </summary>
        public int ThumsizeH { get; set; }
        /// <summary>
        /// 是否縮略圖
        /// </summary>
        public bool MakeThumbnail { get; set; }
        /// <summary>
        /// 圖片的基地址
        /// </summary>
        public string ImageBaseUrl { get; set; }
    }
  1. 服務註冊中進行注入
//MongodbHost信息
services.Configure<MongodbHostOptions>(Configuration.GetSection("MongodbHost"));
//圖片選項
services.Configure<PictureOptions>(Configuration.GetSection("PictureOptions"));

  1. 新建一個PictureController用來做爲圖片上傳的api,裏面包含圖片上傳接口，刪除接口，以及顯示接口，上傳接受一個base64的圖片字符串，而後生成縮略圖，而後存儲到MongoDB數據庫中，所有代碼以下所示：

    using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using MongoDBDemo.Dtos;
using MongoDBDemo.Helper;
using MongoDBDemo.Models;
using MongoDBDemo.Options;
using MongoDBDemo.Result;

namespace MongoDBDemo.Controllers
{

    /// <summary>
    /// yilezhu
    /// 2018.7.10
    /// 圖片操做相關接口
    /// </summary>
    public class PictureController : BaseController
    {
        // MongodbHost信息
        private readonly MongodbHostOptions _mongodbHostOptions;

        // 圖片選項
        private readonly PictureOptions _pictureOptions;

        /// <summary>
        /// 構造函數注入
        /// </summary>
        /// <param name="mongodbHostOptions">MongodbHost信息</param>
        /// <param name="pictureOptions">圖片選項</param>
        public PictureController(IOptions<MongodbHostOptions> mongodbHostOptions, IOptions<PictureOptions> pictureOptions)
        {
            _mongodbHostOptions = mongodbHostOptions.Value;
            _pictureOptions = pictureOptions.Value;
        }

        /// <summary>
        /// 接口上傳圖片方法
        /// </summary>
        /// <param name="fileDtos">文件傳輸對象,傳過來的json數據</param>
        /// <returns>上傳結果</returns>
        [HttpPost]
        public async Task<UploadResult> Post([FromBody] FileDtos fileDtos)
        {
            UploadResult result = new UploadResult();
            if (ModelState.IsValid)
            {
                #region  驗證經過
                //首先根據api參數判斷是否爲圖片類型，是則處理，不是則返回對應的結果
                if (!string.IsNullOrEmpty(fileDtos.Type) && fileDtos.Type.ToLower() == "image")
                {
                    //文件類型
                    string FileEextension = Path.GetExtension(fileDtos.Filename).ToLower();//獲取文件的後綴
                                                                                           //判斷文件類型是不是容許的類型
                    if (_pictureOptions.FileTypes.Split(',').Contains(FileEextension))
                    {
                        //圖片類型是容許的類型
                        Images_Mes fmster = new Images_Mes();//圖片存儲信息類，跟MongoDB裏面表名一致
                        string fguid = Guid.NewGuid().ToString().Replace("-",""); //文件名稱
                        fmster.AddTime = DateTimeOffset.Now;//添加時間爲當前時間
                        fmster.AddUser = "server";//具體根據你的業務來獲取
                        if (Base64Helper.IsBase64String(fileDtos.Base64String, out byte[] fmsterByte))
                        {
                            //判斷是不是base64字符串，若是是則轉換爲字節數組，用來保存
                            fmster.FileCon = fmsterByte;
                        }
                        fmster.FileName = Path.GetFileName(fileDtos.Filename);//文件名稱
                        fmster.FileSize = fmster.FileCon.Length;//文件大小
                        fmster.FileType = FileEextension;//文件擴展名
                        fmster.GuidID = fguid;//惟一主鍵，經過此來獲取圖片數據
                        await MongodbHelper<Images_Mes>.AddAsync(_mongodbHostOptions, fmster);//上傳文件到mongodb服務器
                                                                                              //檢查是否須要生產縮略圖
                        if (_pictureOptions.MakeThumbnail)
                        {
                            //生成縮略圖
                            Images_Mes fthum = new Images_Mes();
                            fthum.AddTime = DateTimeOffset.Now;
                            fthum.AddUser = "server";//具體根據你的業務來獲取
                            fthum.FileCon = ImageHelper.GetReducedImage(fmster.FileCon, _pictureOptions.ThumsizeW, _pictureOptions.ThumsizeH);
                            fthum.FileName = Path.GetFileNameWithoutExtension(fileDtos.Filename) + "_thumbnail" + Path.GetExtension(fileDtos.Filename);//生成縮略圖的名稱
                            fthum.FileSize = fthum.FileCon.Length;//縮略圖大小
                            fthum.FileType = FileEextension;//縮略圖擴展名
                            fthum.GuidID = fguid + _pictureOptions.ThumbnailGuidKeys;//爲了方面，縮略圖的主鍵爲主圖主鍵+一個字符yilezhu做爲主鍵
                            await MongodbHelper<Images_Mes>.AddAsync(_mongodbHostOptions, fthum);//上傳縮略圖到mongodb服務器
                        }
                        result.Errcode = ResultCodeAddMsgKeys.CommonObjectSuccessCode;
                        result.Errmsg = ResultCodeAddMsgKeys.CommonObjectSuccessMsg;
                        UploadEntity entity = new UploadEntity();
                        entity.Picguid = fguid;
                        entity.Originalurl = _pictureOptions.ImageBaseUrl + fguid;
                        entity.Thumburl = _pictureOptions.ImageBaseUrl + fguid + _pictureOptions.ThumbnailGuidKeys;
                        result.Data = entity;
                        return result;
                    }
                    else
                    {
                        //圖片類型不是容許的類型
                        result.Errcode = ResultCodeAddMsgKeys.HttpFileInvalidCode;//對應的編碼
                        result.Errmsg = ResultCodeAddMsgKeys.HttpFileInvalidMsg;//對應的錯誤信息
                        result.Data = null;//數據爲null
                        return result;
                    }

                }
                else
                {
                    result.Errcode = ResultCodeAddMsgKeys.HttpFileNotFoundCode;
                    result.Errmsg = ResultCodeAddMsgKeys.HttpFileNotFoundMsg;
                    result.Data = null;
                    return result;
                }
                #endregion
            }
            else
            {
                #region 驗證不經過
                StringBuilder errinfo = new StringBuilder();
                foreach (var s in ModelState.Values)
                {
                    foreach (var p in s.Errors)
                    {
                        errinfo.AppendFormat("{0}||", p.ErrorMessage);
                    }
                }
                result.Errcode = ResultCodeAddMsgKeys.CommonModelStateInvalidCode;
                result.Errmsg = errinfo.ToString();
                result.Data = null;
                return result;
                #endregion
            }
        }

        /// <summary>
        /// 刪除圖片
        /// </summary>
        /// <param name="guid">原始圖片主鍵</param>
        /// <returns>執行結果</returns>
        [HttpDelete("{guid}")]
        public async Task<BaseResult> Delete(string guid)
        {
            await MongodbHelper<Images_Mes>.DeleteAsync(_mongodbHostOptions, guid);//刪除mongodb服務器上對應的文件
            await MongodbHelper<Images_Mes>.DeleteAsync(_mongodbHostOptions, guid + _pictureOptions.ThumbnailGuidKeys);//刪除mongodb服務器上對應的文件
            return new BaseResult(ResultCodeAddMsgKeys.CommonObjectSuccessCode, ResultCodeAddMsgKeys.CommonObjectSuccessMsg);
        }

        /// <summary>
        /// 返回圖片對象
        /// </summary>
        /// <param name="guid">圖片的主鍵</param>
        /// <returns>圖片對象</returns>
        [Route("Show/{guid}")]
        [HttpGet]
        public async Task<FileResult> ShowAsync(string guid)
        {
            if (string.IsNullOrEmpty(guid))
            {
                return null;
            }
            FilterDefinition<Images_Mes> filter = Builders<Images_Mes>.Filter.Eq("GuidID", guid);
            var result= await MongodbHelper<Images_Mes>.FindListAsync(_mongodbHostOptions, filter);
            if (result != null && result.Count > 0)
            {
                return File(result[0].FileCon, "image/jpeg", result[0].FileName);
            }
            else
            {
                return null;
            }

        }
    }
}

    1. 下面咱們先鏈接下MongoDB看下里面內容以下：

      win7系統MongoDB操做軟件顯示有點問題，將就將就吧！

      MongoDB數據庫

  2. 打開Postman進行圖片上傳操做，方法選擇「Post」,參數格式選擇json,而後輸入對應的參數格式，以下圖所示，都有標註，相信你都能看懂：

    PostMan測試

  3. 參數輸入完畢以後，最後點擊右側的「Send」按鈕進行測試，看到以下所示的返回結果：

Postman測試結果

  1. 咱們接下來利用工具查詢下MongoDB，看看有沒有生成對應的數據庫以及Collections以下圖所示，能夠看到生成了咱們定義的File_Server數據庫以及Images_Mes集合

    執行後的MongoDB數據庫

  2. 查詢下看看裏面的數據能夠看到裏面的數據正是結果返回的數據，說明咱們的結果是正確的，以下所示：

    MongoDB查詢結果

  3. 最後應該打開瀏覽器，而後輸入圖片地址，瀏覽器就會自動下載圖片了，效果以下所示：

    瀏覽器打開圖片

    示例代碼

    [點我下載][https://github.com/yilezhu/ImageUploadApiDemo]

總結

教程已經寫完了，細心地朋友應該可以看到，大部分代碼都是昨天晚上寫的，今天晚上又稍加修改完成的！一篇文章足足消耗了兩個晚上，但願你們能多多支持！ 總結中說了一句廢話！莫怪啊！本篇文章首先介紹了MongoDB的安裝，而後建立了一個新的Asp.Net Core Web Api項目，而後經過一個圖片上傳的實例來說述了Asp.Net Core中圖片上傳的操做，以及MongoDB做爲圖片存儲的實現！固然中間用到了圖片縮略圖的生成，最後寫了一個簡單地圖片展現。但願本篇關於Asp.Net Core Web Api圖片上傳及MongoDB存儲的實例教程能對你們使用Asp.Net Core Web Api進行圖片上傳以及MongoDB的使用有多幫助！ 最後，仍是但願你們多多推薦，多多支持！下面我會繼續完善下代碼，加入IdentityServer認證，以及SwaggerUI實現接口文檔，可是Ocelot網關技術以及consul實現服務發現以及故障的郵件發送等等功能就不在此項目代碼中應用了！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程