iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1
Cloud

Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例系列 第 16

Day16 - Azure Blob storage Part1 本地端上傳檔案測試

  • 分享至 

  • xImage
  •  

在View/App的目錄下, 新增一個FileUpload.cshtml的MVC View Page
http://ithelp.ithome.com.tw/upload/images/20161223/20103333OpwePJmA5X.png

打開FileUpload.cshtml, 輸入下列程式碼
http://ithelp.ithome.com.tw/upload/images/20161223/20103333fontpJ5G2q.png

修改_Layout.cshtml加入上傳檔案的連結如下
http://ithelp.ithome.com.tw/upload/images/20161223/20103333Myvb5KQqlv.png

接著打開AppController.cs, 新增底下Namespace
...
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Net.Http.Headers;
using System.IO;
並加入底下程式碼將IhostingEnvironment注入AppController的建構式裡, 之後可以取得WebRoot的資料夾位置,來放置上傳檔案
private IHostingEnvironment _environment;

public AppController(IHostingEnvironment environment)
{
_environment = environment;
}
...
http://ithelp.ithome.com.tw/upload/images/20161224/20103333BM5JKfbb2k.png

接著在加入底下兩個函式, 一個FileUpload的預設View, 一個上傳功能, 完成之後會回傳路徑字串到前端的View
http://ithelp.ithome.com.tw/upload/images/20161224/20103333shiOI3TVbK.png

接著在wwwroot目錄下, 新增一個uploads資料夾
http://ithelp.ithome.com.tw/upload/images/20161224/20103333DOgpjMLrMb.png

然後將站台跑起來測試, 點選File Upload, 選擇檔案上傳
http://ithelp.ithome.com.tw/upload/images/20161224/20103333AqGf7Amvb9.png

成功上傳畫面如下
http://ithelp.ithome.com.tw/upload/images/20161224/20103333JtxZ9qh2m8.png

到此完成本地端上傳前菜, 下一篇Part2就是主菜, 上傳至Azure Blob storage

後記: 沒想到ASP.NET CORE多檔案上傳這麼好寫, 在WEB FORM時代還挺麻煩的, 果然時代在進步啊


上一篇
Day15- Azure Active Directory B2C Part3 ASP.NET Core測試
下一篇
Day17 - Azure Blob storage Part2 Azure上下傳檔案測試
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言