Vue.js 3.0搭配.NET Core寫一個牛B的文件上傳組件

在開發Web應用程序中，文件上傳是常常用到的一個功能。
在Jquery時代，作上傳功能，通常找jQuery插件就夠了，不多有人去探究上傳文件插件究竟是怎麼作的。
簡單列一下咱們要作的技術點和功能點

使用技術

客戶端使用vue.js 3.0，並使用vue3新增的功能:Composition API ,服務器使用asp.net core

功能點

1. 標籤美化
2. 文件預覽
3. 文件上傳
4. 服務器接收文件

文件選擇美化

在標準的html文件選擇標籤，是十分不美觀的。大概就是下圖的樣子

可是咱們的設計師的設計圖可不是這樣的啊，因此第一步是選擇美化一下樣式。

標籤美化

找遍整個搜索引擎，美化文件選擇標籤只有兩種方法

1. 設置input標籤透明度爲0，而後定位一個其餘的容易修改樣式的標籤到透明度度爲0的input標籤上。
2. 設置input標籤的display爲none，而後使用JavaScript來觸發當前input的點擊事件。

由於筆者最近在作基於vue.js 3.0的項目，須要本身自定義不少UI組件，因此參考了layui element ，它們都是使用第二種方式來美化文件選擇標籤。

假設咱們UI設計圖是上圖的樣式，若是須要美化，只須要隱藏文件選擇的Input標籤。而後放置一個按鈕，而後設置按鈕的樣式爲設計圖上的樣式便可

<div class="uploader">
    <button>選擇文件</button>
    <input type="file" placeholder="請選擇文件" />
  </div>

.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標籤

<template>
  <div class="uploader">
    <button @click="btnClick">選擇文件</button>
    <input type="file" placeholder="請選擇文件" ref="fileSelector" />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "uploader",
  setup() {
    const fileSelector = ref(null);
    const btnClick = () => {
      fileSelector.value.click();
    };
    return {
      fileSelector,
      btnClick,
    };
  },
};
</script>

在Composition api中要獲取到標籤的ref，不能使用this.$refs來獲取。固然，你若是喜歡使用vue2的options api。那依然可使用this.$refs來獲取標籤的el
只須要簡單的觸發input的click事件，就可使瀏覽器彈出文件選擇框了。

文件預覽

基本上全部的文件上傳組件，都有預覽上傳圖片的功能。本文所寫的上傳組件固然也不例外。
監聽input標籤的change事件，獲取到files對象。而後使用FileReader讀取文件信息。

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去上傳文件。

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);
    };

在頁面上新增一個按鈕，用來手動觸發上傳

<div class="uploader">
    <button @click="btnClick">選擇文件</button>
    <button @click="uploadClick">當即上傳</button>
    <input
      type="file"
      placeholder="請選擇文件"
      ref="fileSelector"
      @change="fileChange"
      multiple
    />
    <div class="image-list">
      <img v-for="(item, i) in data.imgList" :key="i" :src="item.base64" />
    </div>
    <div class="log">
      <p v-for="(item, i) in data.logs" :key="i">{{ item.log }}</p>
    </div>
  </div>

點擊 當即上傳 按鈕，觸發上傳

const uploadClick = () => {
      data.files.forEach((file) => {
        uploadServer(file);
      });
    };

服務器接收

在服務器編程中，咱們使用C#來接收上傳的文件。

/// <summary>
        /// 上傳
        /// </summary>
        /// <param name="files"></param>
        /// <returns></returns>
        [HttpPost("/upload")]
        public async Task<IActionResult> Upload([FromServices] IWebHostEnvironment host)
        {
            var files = Request.Form.Files;
            long size = files.Sum(f => f.Length);
            List<string> list = new List<string>();
            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跨域處理

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文件上傳組件開發到這裏就結束了。
更多幹貨，以及本文的示例代碼， 歡迎關注個人公衆號: 青城同窗 回覆 文件上傳 獲取下載地址
固然也能夠掃碼
歡迎轉載，請註明出處以及不要隨意刪改內容