實例講解Vue怎麼實現上傳檔案功能

Vue是一款受歡迎的JavaScript框架，它被廣泛應用於前端開發當中。在Vue中，檔案上傳是一個很常見的需求，本文將介紹Vue上傳檔案的寫法。

一、安裝依賴

Vue檔案上傳需要使用axios和vue-router這兩個依賴，所以我們需要安裝這兩個依賴：

npm install axios vue-router --save

二、HTML程式碼

下面是Vue上傳檔案的HTML程式碼：

<template>
  <div>
    <input>
    <button>上传</button>
  </div>
</template>

其中，onFileChange是選擇檔案時觸發的事件，upload是點擊上傳按鈕時觸發的事件。

三、JavaScript程式碼

接下來，我們需要寫Vue的JavaScript程式碼：

<script>
  import axios from &#39;axios&#39;
  import router from &#39;vue-router&#39;
  
  export default {
    name: &#39;file-upload&#39;,
    data () {
      return {
        file: null,
        errorMsg: &#39;&#39;
      }
    },
    methods: {
      onFileChange (event) {
        this.file = event.target.files[0];
      },
      upload () {
        let formData = new FormData();
        formData.append(&#39;file&#39;, this.file);
        
        let token = localStorage.getItem(&#39;token&#39;);
        if (token) {
          axios.post(&#39;/api/upload&#39;, formData, {
            headers: {
              &#39;Authorization&#39;: &#39;Bearer &#39; + token
            }
          })
          .then(response => {
            router.push(&#39;/success&#39;);
          })
          .catch(error => {
            this.errorMsg = &#39;上传文件失败&#39;;
          })
        }
      }
    }
  }
</script>

其中，我們先import了axios和vue-router依賴，然後定義了一個data對象，包含了file和errorMsg兩個屬性，分別表示檔案和錯誤訊息。

接著，我們定義了兩個方法：onFileChange和upload。 onFileChange方法會在選擇檔案時觸發，將選取的檔案儲存在data物件的file屬性中。 upload方法會在上傳按鈕被點擊時觸發，先建立一個FormData對象，然後透過axios.post方法向伺服器上傳文件，上傳成功後使用vue-router將頁面跳到成功頁面，在上傳過程中發生錯誤， errorMsg屬性被賦值為上傳檔案失敗。

四、總結

Vue上傳檔案的寫法相對較簡單，只需要了解axios和vue-router兩個依賴的用法，就能夠實現檔案上傳功能。希望本文的介紹能對大家有幫助。

以上是實例講解Vue怎麼實現上傳檔案功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！