摘要：必須阻止和事件的默認行為，這樣才能觸發事件文件對象將圖片轉換為獲取到圖片內容微信截圖上傳監聽事件，通過剪貼板對象獲取圖片信息。但是最好的方案還是不管下載上傳都直接走獨立圖片服務器，避免對服務器造成額外的壓力。

更多文章請點擊Jade

接了一個「常規」需求：開發一個本地上傳圖片控件，需要支持三種上傳方式：

支持打開本地目錄，選擇本地圖片上傳

支持拖曳圖片上傳

支持微信截圖上傳

我們先從工程角度來看一下用戶上傳圖片的流程是怎樣子的：

用戶選擇了一張本地圖片，或者拖曳了一張圖片，或者通過微信截圖了一張圖片。這時，我們需要知道用戶所選擇圖片的信息，比如圖片的內容、圖片的大小、圖片的類型等。

用戶上傳圖片。這時，我們需要保存圖片。

用戶查看圖片。這時，我們需要把第2步中保存的圖片展示給用戶。

通過type為file的input標簽選擇本地圖片上傳，每次選擇不同圖片的時候會觸發onChange事件。為什么我要強調不同圖片，因為當兩次選擇的圖片是一樣的情況下，onChange事件無法觸發。解決方法：每次處理完后手動置空input的value。

  // 置空input value
  clearImgInputValue () {
    document.getElementById("img-input").value = ""
  }
  bindChooseEvents = (e) => {
    console.log("choose a image")

    // 獲取File對象
    const file = e.target.files[0]
    let size = file.size

    if (!file.type.match("image.*")) {
      AntMessage.warning("File"s type is not supported. Images only.")
      this.clearImgInputValue()
      return;
    }

    if (size > maxSize) {
      AntMessage.warning("The size of the image is too large")
      this.clearImgInputValue()
      return;
    }

    /* eslint-disable */
    const reader = new FileReader()  // FileReader
    /* eslint-disable */
    // 將圖片轉換為base64
    reader.readAsDataURL(file)
    reader.onload = (arg) => {
      // 獲取到base64圖片內容
      const fileStream = arg.target.result
      /**
       * overwrite do something
       * */
      this.clearImgInputValue()
    }
  }

監聽拖曳事件，通過拖曳相關的DataTransfer對象獲取圖片信息。

  
Drop Zone

  bindDragEvents = (e) => {
    const handleDragOver = (event) => {
      event.stopPropagation()
      event.preventDefault()
      event.dataTransfer.dropEffect = "copy"
    }

    // 必須阻止dragenter和dragover事件的默認行為，這樣才能觸發 drop 事件
    const handleFileSelect = (event) => {
      event.stopPropagation()
      event.preventDefault()

      const files = event.dataTransfer.files // 文件對象
      const file = files[0]
      const size = file.size
      const type = file.type

      if (!type.match("image.*")) {
        AntMessage.warning("File"s type is not supported. Images only.")
        return;
      }

      if (size > maxSize) {
        AntMessage.warning("The size of the image is too large")
        return;
      }

      /* eslint-disable */
      const reader = new FileReader()
      /* eslint-disable */
      // 將圖片轉換為base64
      reader.readAsDataURL(file)
      reader.onload = (arg) => {
        // 獲取到base64圖片內容
        const fileStream = arg.target.result
        /**
         * overwrite do something
         * */
      }
    }

    const dropZone = document.getElementById("drop-zone");
    dropZone.addEventListener("dragover", handleDragOver, false);
    dropZone.addEventListener("drop", handleFileSelect, false);
  }

監聽paste事件，通過剪貼板對象clipboardData獲取圖片信息。

  bindClipEvents() {
    document.addEventListener("paste", (e) => {
      console.log("paste a image")
      const clipboard = e.clipboardData

      // 有無內容
      if (!clipboard.items || !clipboard.items.length) {
        AntMessage.warning("No content in the clipboard")
        return;
      }

      let item = clipboard.items[0]
      if (item.kind === "file" && item.type.match("image.*")) {
          // 獲取圖片文件
          let imgFile = item.getAsFile()

          if (imgFile.size > maxSize) {
            AntMessage.warning("The size of the image is too large")
            return;
          }

          const reader = new FileReader()
          // 將圖片轉換為base64
          reader.readAsDataURL(imgFile)
          reader.onload = (arg) => {
            // 獲取到base64圖片內容
            const fileStream = arg.target.result
            /**
             * overwrite do something
             * */
          }
      } else {
        AntMessage.warning("File"s type is not supported. Images only.")
      }
    }, false)
  }

圖片保存一般都采用獨立圖片獨立域名服務器，不會傻乎乎地把圖片保存在web服務器上也不會直接存在項目表的數據庫中。這樣做有什么好處呢？

圖片訪問是I/O密集型操作，很消耗服務器資源，從Web服務器獨立出來后，能夠減少Web服務器壓力

便于擴容、容災和數據遷移

瀏覽器有同域名下的并發策略限制

請求圖片一般并不需要cookie，但是瀏覽器發起的所有同域名請求時，http頭部都會自動帶上cookie信息，導致浪費帶寬

方便對圖片訪問做負載均衡，可以對圖片應用各種緩存策略

方便遷移CDN

...

項目實踐中我們雖然采用了獨立圖片服務器，下載過程只是通過Web服務器去數據庫拿到圖片地址，但是我們的上傳操作仍舊經過了Web服務器，需要Web服務器上的應用程序來處理，所以上傳過程仍舊對Web服務器造成壓力。所幸的是，我們對圖片上傳大小進行了1M的大小限制，同時作為內部系統沒啥訪問壓力，而且圖片上傳功能也并不是很高發的行為，所以這么做基本也不會有啥問題。但是最好的方案還是不管下載上傳都直接走獨立圖片服務器，避免對Web服務器造成額外的壓力。

理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型

復制粘貼的高級玩法

使用FileReader.readAsArrayBuffer()在瀏覽器中處理大文件

大型網站圖片服務器架構的演進