歡迎光臨
每天分享高質量文章

.NET Core+IView+Vue整合上傳圖片功能

作者:張子浩

連結:http://www.cnblogs.com/ZaraNet/p/10212821.html

專案裡有上傳圖片的功能,當然這個功能在專案裡是必須要有的,那麼目前這個專案是使用完全的前後端分離。


在選擇檔案上傳的元件中還是選擇了全面支援Vue的IView,任何上傳圖片都是透過HTTP請求,服務端從request中讀,那麼思路有了,直接建立webAPI專案吧。

一般來說,在.NET Core中靜態檔案應該放到wwwroot,在其中建立一個檔案夾。

再做好跨域的東西,一般都是透過cors包。建立控制器,程式碼如下:


public class IndexController : ControllerBase
{
   [HttpPost]
   public async Task<bool> InsertPicture([FromServices]IHostingEnvironment environment)
   
{
       var data = new PicData();
       string path = string.Empty;
       var files = Request.Form.Files;
       if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的檔案。"; return false; }
       //格式限制
       var allowType = new string[] { "image/jpg", "image/png","image/jpeg"};
       if (files.Any(c => allowType.Contains(c.ContentType)))
       {
           if (files.Sum(c => c.Length) <= 1024 * 1024 * 4)
           {
               foreach (var file in files)
               {
                   string strpath = Path.Combine("Upload", DateTime.Now.ToString("MMddHHmmss") + file.FileName);
                   path = Path.Combine(environment.WebRootPath, strpath);
                   using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
                   {
                       await file.CopyToAsync(stream);
                   }
               }
               data.Msg = "上傳成功";
               return true;
           }
           else
           {
               data.Msg = "圖片過大";
               return false;
           }
       }
       else
       {
           data.Msg = "圖片格式錯誤";
           return false;
       }
   }
}
public class PicData
{
   public string Msg { get; set; }
}

程式碼解讀:

讀取wwwroot是在IHostingEnvironment物件中的,如果不透過依賴註入,就需要直接寫成引數,那麼file上傳的引數開頭都應該[FromServices]來修飾,在程式碼中判斷了響應的檔案格式、檔案大小,透過file.copy就把檔案儲存在了伺服器。

需要跨域:

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
   services.AddCors(options =>
   {
       options.AddPolicy("hehe", p => p.AllowAnyMethod()// 允許任何方法 GET,POST,PUT,DELETE, OPTIONS
                   .AllowAnyHeader()       // 允許任何請求頭
                   .AllowAnyOrigin()       // 允許任何地址
          );
   });
}

//This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
   app.UseStaticFiles(); app.UseCors("hehe");
   if (env.IsDevelopment())
   {
       app.UseDeveloperExceptionPage();
   }
   app.UseMvc();
}


前臺:


<template>
   <div>
       <Upload
       multiple
       type="drag"
       action="http://localhost:54331/api/Index">

       <div style="padding: 20px 0">
           <Icon type="ios-cloud-upload" size="52" style="color: #3399ff">Icon>

           <p>點選或將檔案拖拽到這裡上傳p>
       div>
   Upload>
   div>
template>
<script>
export default {
}
script>


程式碼解讀::


前臺是非常簡單的,在main.js中取用Iview,當然這一切的前提都需要Npm一下它.iview的這個元件,action就是你請求的方法,預設呢就是post請求。


那麼Iview還有別的屬性,詳見下方。


效果圖:

文末:

後來我們團隊考慮到使用七牛這個線上儲存圖片站點,準備好實名的賬號和sdk,獲取AccessKey,SecretKey。


登入七牛管理後臺->個人資訊->秘鑰管理

那麼官方給我們提供了.NET Core 的版本直接nuget就可以了。


程式碼:


///


/// 實現將檔案上傳到七牛雲
///

/// 檔案流
/// 檔案名稱
///
public UploadQiNiuResult UploadImgToQiNiu(byte[] stream, string fileName)
{
   Mac mac = new Mac(BlogStatic.QiNiuInfo_AccessKey, BlogStatic.QiNiuInfo_SecretKey);
   // 上傳策略,參見
   // https://developer.qiniu.com/kodo/manual/put-policy
   PutPolicy putPolicy = new PutPolicy();
   // 如果需要設定為”改寫”上傳(如果雲端已有同名檔案則改寫),請使用 SCOPE = “BUCKET:KEY”
   // putPolicy.Scope = bucket + “:” + saveKey;
   var saveKey = string.Format(“BlogImg/{0}/”, DateTime.Now.ToString(“yyyy/MM/dd”)) + fileName;
   putPolicy.Scope = “blog:” + saveKey;
   // 上傳策略有效期(對應於生成的憑證的有效期)
   putPolicy.SetExpires();
   // 上傳到雲端多少天后自動刪除該檔案,如果不設定(即保持預設預設)則不刪除
   // putPolicy.DeleteAfterDays = 1;
   string jstr = putPolicy.ToJsonString();
   //獲取上傳憑證
   var uploadToken = Auth.CreateUploadToken(mac, jstr);
   UploadManager um = new UploadManager();
   HttpResult result = um.UploadData(stream, saveKey, uploadToken);)
   {
       return JsonConvert.DeserializeObject(result.Text);
   }
   return null;
}


UploadQiNiuResult類


public class UploadQiNiuResult
{
   public string Hash { get; set; }
   public string Key { get; set; }
}


編號222,輸入編號直達本文

贊(0)

分享創造快樂