聊聊vue圖片上傳的三種方法

隨著網路發展，圖片上傳成為了日常開發的重要功能。在 Vue 開發中，我們也有多種方式來實作圖片上傳，例如使用第三方外掛程式、原生 Ajax 以及利用 HTML5 的 FileReader。本文將會介紹這三種實現圖片上傳的方式以及各自的優缺點，希望對你有幫助。

1.使用第三方外掛程式

在Vue 開發中，我們可以使用一些已經被廣泛使用的第三方外掛程式來實作圖片上傳，例如Vue-Upload、Vue-Core-Image -Upload 等等。這些插件已經經過了許多人的使用和測試，可以有效地加速我們開發的進程，並且它們可以快速地整合進我們的專案中。這裡我們以 Vue-Upload 為例來講解其使用方法。

第一步是安裝插件，在命令列中輸入：

npm install vue-upload

第二步是引入插件，在需要使用的元件中引入Vue-Upload：

import VueUpload from 'vue-upload'

第三步是在元件中使用，我們將一個button 作為觸發器來選擇圖片，再利用Vue-Upload 的功能來上傳圖片：

<button @click="upload()">选择文件</button>
<VueUpload ref="upload"
           :post-action="&#39;url&#39;"
           :headers="headers"
           :name="&#39;file&#39;"
           @input="onUpload"></VueUpload>

其中，post-action 為上傳的位址，headers為請求頭，name 為檔案欄位名稱。 onUpload 方法是上傳完成後呼叫的方法。

Vue-Upload 的優點是快速方便，但缺點也很明顯，也就是我們無法完全自訂上傳的功能。

2.原生 Ajax

Vue 中也支援原生 Ajax 請求來完成圖片上傳。我們可以在元件中實作一個 input 輸入框，再用 Ajax 把 input 中選擇的檔案上傳到伺服器。這種方法需要自己實現完整的上傳流程，包括上傳進度以及異常處理等等，但是我們能夠自由地自訂上傳的功能，也不會受到第三方外掛程式的束縛。

第一步是在範本中加入一個input 輸入框：

<input ref="file" type="file" @change="upload()">

第二步是在Vue 的methods 中實作上傳的邏輯：

upload: function () {
  const fileInput = this.$refs.file;
  const file = fileInput.files[0]
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: e => {
      // 上传进度的处理逻辑
    }
  }).then(res => {
    // 上传成功的处理逻辑
  }).catch(err => {
    // 异常处理逻辑
  })
}

這段程式碼中利用了axios 來傳送Ajax 請求，我們可以自行選擇其他的網路請求庫。 onUploadProcess 為上傳進度的回呼函數，我們可以在其中實作上傳進度的處理邏輯。

3.利用 HTML5 的 FileReader

HTML5 的 FileReader 提供了一種新的方式來讀取用戶本地設備的文件，我們可以利用它來完成圖片上傳。這種方式可以避免瀏覽器的預設提交和頁面跳轉，也更友善地與 Vue 的元件化開發方式結合。

第一步是在元件的data 中定義一個image 變數和一個fileReader 物件：

data: function () {
  const fileReader = new FileReader();
  fileReader.onload = () => {
    this.image = fileReader.result;
  };
  
  return {
    image: null,
    fileReader: fileReader
  };
}

第二步是在元件的methods 中實作檔案讀取和上傳的邏輯：

upload: function () {
  const fileInput = this.$refs.file;
  const file = fileInput.files[0]
  this.fileReader.readAsDataURL(file);
},
submit: function () {
  const image = this.image;
  axios.post('/upload', {image: image})
    .then(res => {
      // 上传成功的处理逻辑
    }).catch(err => {
      // 异常处理逻辑
    })
}

這裡我們將圖片讀取後存在了一個image 變數中，接著再將圖片提交給伺服器。這種方法的優點在於介面友好，圖片處理邏輯清晰，缺點在於無法支援上傳進度的顯示。

總結

本文介紹了在 Vue 中實作圖片上傳的三種方法，它們分別是使用第三方外掛程式、原生 Ajax 以及利用 HTML5 的 FileReader。每種方法都有其優缺點，開發者可以根據專案的實際需求來選擇合適的方法。圖片上傳是常見的功能，掌握這些上傳的方法也是 Vue 開發者必備的技能之一。

以上是聊聊vue圖片上傳的三種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！