在開發Web應用程式中，檔案上傳是經常用到的一個功能。 在Jquery時代，做上傳功能，一般找jQuery外掛就夠了，很少有人去探究上傳檔案外掛到底是怎麼做的。 簡單列一下我們要做的技術點和功能點 ## 使用技術 客戶端使用vue.js 3.0，並使用vue3新增的功能:**Composition API** ,伺服器使用asp.net core ## 功能點 1. 標籤美化 2. 檔案預覽 3. 檔案上傳 5. 伺服器接收檔案 ## 檔案選擇美化 在標準的html檔案選擇標籤，是十分不美觀的。大概就是下圖的樣子  > 但是我們的設計師的設計圖可不是這樣的啊，所以第一步是選擇美化一下樣式。 ## 標籤美化 找遍整個搜尋引擎，美化檔案選擇標籤只有兩種方法 1. 設定input標籤透明度為0，然後定位一個其他的容易修改樣式的標籤到透明度度為0的input標籤上。 2. 設定input標籤的display為none，然後使用JavaScript來觸發當前input的點選事件。 因為筆者最近在做基於vue.js 3.0的專案，需要自己自定義很多UI元件，所以參考了layui element ，它們都是使用第二種方式來美化檔案選擇標籤。  假設我們UI設計圖是上圖的樣式，如果需要美化，只需要隱藏檔案選擇的Input標籤。然後放置一個按鈕，然後設定按鈕的樣式為設計圖上的樣式即可 ``` html 選擇檔案 ``` ``` less .uploader { display: inline-block; button { background: #4e6ef2; color: aliceblue; padding: 5px; outline: none; border: none; &:hover { opacity: 0.8; } &:active { opacity: 1; } } input { display: none; } } ``` 美化完成元件後，我們需要用在button點選的時候，使用JavaScript去點選隱藏的input標籤 ``` javascript ``` > 在Composition api中要獲取到標籤的ref，不能使用this.$refs來獲取。當然，你如果喜歡使用vue2的options api。那依然可以使用this.$refs來獲取標籤的el 只需要簡單的觸發input的click事件，就可以使瀏覽器彈出檔案選擇框了。 ## 檔案預覽 基本上所有的檔案上傳元件，都有預覽上傳圖片的功能。本文所寫的上傳元件當然也不例外。 監聽input標籤的change事件，獲取到files物件。然後使用FileReader讀取檔案資訊。 ``` javascript const fileChange = (e) => { let files = e.target.files; console.log(files); for (let i = 0; i < files.length; i++) { let file = files[i]; var fileReader = new FileReader(); fileReader.addEventListener( "load", (event) => { console.log(event); data.imgList.push({ base64: event.target.result, }); }, false ); fileReader.readAsDataURL(file); } }; ```  > 在Chromium核心等高版本瀏覽器中，無法像低版本瀏覽器一樣，能獲得檔案的具體磁碟路徑。如果像以前用檔案路徑去獲取檔案。只能獲得一個 **C:\fakepath\"+檔名**的路徑。無法獲取到真實檔案路徑。據說可以通過某些方法獲取真實路徑。我試過，沒成功。有興趣的朋友可以試試。 ## 檔案上傳 選擇檔案後，我們需要把檔案儲存到到伺服器。在傳統的多頁面web程式中，只需要設定按鈕的type為submit，然後使用form表單直接提交檔案和表單資訊到伺服器去。 但是我們做單頁面程式，一般來說是通過JavaScript的ajax去上傳檔案。 ``` javascript const uploadServer = (file) => { var form = new FormData(); form.append("file", file); var xhr = new XMLHttpRequest(); xhr.open("post", props.server); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var res = JSON.parse(xhr.responseText); console.log("上傳成功"); data.logs.push({ log: res, }); } }; xhr.upload.onprogress = (event) => { if (event.lengthComputable) { var percent = (event.loaded / event.total) * 100; console.log("上傳進度:" + percent); } }; xhr.onerror = () => { console.log("上傳檔案錯誤"); }; xhr.ontimeout = () => { console.log("上傳超時"); }; xhr.send(form); }; ``` 在頁面上新增一個按鈕，用來手動觸發上傳 ``` html 選擇檔案 立即上傳

{{ item.log }}

``` 點選 立即上傳 按鈕，觸發上傳 ``` javascript const uploadClick = () => { data.files.forEach((file) => { uploadServer(file); }); }; ```  ## 伺服器接收 在伺服器程式設計中，我們使用C#來接收上傳的檔案。 ``` csharp ///

/// 上傳 ///

/// /// [HttpPost("/upload")] public async Task Upload([FromServices] IWebHostEnvironment host) { var files = Request.Form.Files; long size = files.Sum(f => f.Length); List list = new List(); foreach (var formFile in files) { if (formFile.Length > 0) { var path = Path.Combine(host.WebRootPath, "files"); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } string fileName = $"{Guid.NewGuid():N}{Path.GetExtension(formFile.FileName)}"; path = Path.Combine(path, fileName); var filePath = path; using var stream = System.IO.File.Create(filePath); await formFile.CopyToAsync(stream); var c = Path.VolumeSeparatorChar; list.Add($"{Request.Scheme}://{Request.Host.Value}/{Path.Combine("files", fileName).Replace(Path.DirectorySeparatorChar, Path.AltDirectorySeparatorChar)}"); } } return Ok(new { list = list, size }); } ``` 使用dotnet run執行asp.net core服務端。然後點選上傳，你以為就上傳成功了嗎？ 不！沒那麼簡單。如果如果vue程式和asp.net core程式，不在同一個域名下，你還得處理上傳跨域問題。當然這個問題在asp.net core中是非常簡單的。只需要簡單配置一下即可 > 如果在IIS或者Nginx下，就需要修改對應站點的配置檔案了。當然具體伺服器軟體的配置不在本篇文章的討論之下。有需要的同學可以私下交流 asp.net core跨域處理 ``` csharp app.UseCors(options => { options.WithOrigins("http://localhost:3000", "http://127.0.0.1", "http://localhost:8080"); // 允許特定ip跨域 options.AllowAnyHeader(); options.AllowAnyMethod(); options.AllowCredentials(); }); ``` 以上配置必須要放在app.UseStaticFiles();之前才會生效。 上傳成功後，你就會在伺服器的wwwroot的files資料夾中看到上傳的圖片檔案了。  本文完成了基本的功能，起一個拋磚引玉的作用。更多功能，如:檔案型別限制，檔案大小限制等，可以根據使用場景自定義擴充套件
本篇vue 3.0檔案上傳元件開發到這裡就結束了。 更多幹貨，以及本文的示例程式碼， 歡迎關注我的公眾號: 青城同學 回覆 檔案上傳 獲取下載地址 當然也可以掃碼  歡迎轉載，請註明出處以及不要隨意刪