vue上傳文件詳解

一、vue上傳文件後展示

在介紹vue上傳文件的方式之前，我們需要先了解如何在上傳文件後展示上傳的內容。我們可以藉助JavaScript中的FileReader對象來實現。下面的代碼片段展示了如何在上傳文件後，將其內容展示在頁面上：

<template>
  <div>
    <input type="file" @change="previewFile">
    <img :src="imageSrc" v-if="imageSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: null
    }
  },
  methods: {
    previewFile(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageSrc = reader.result;
      };
    }
  }
}
</script>

上面的代碼中，我們在模板中添加了一個文件上傳框和一個圖像標籤。選取文件後，調用previewFile函數來處理文件，通過FileReader對象讀取圖片的URL，並將其綁定到imageSrc變數上，通過v-if指令在頁面上展示圖片。

二、vue上傳文件503

上傳文件時，有可能會遇到503錯誤，表示上傳的文件過大或者類型不支持。這時，我們可以在前端代碼中設置對應的文件大小和限制文件類型。下面的代碼展示了如何在Vue中設置這些限制：

// 在template部分
<div>
  <input type="file" ref="fileInput" @change="handleFileUpload">
</div>

// 在script部分
export default {
  data() {
    return {
      validFileType: ['image/png', 'image/jpg', 'image/jpeg'],
      maxFileSize: 2 * 1024 * 1024 // 最大2MB
    }
  },
  methods: {
    handleFileUpload() {
      const file = this.$refs.fileInput.files[0];
      if (!this.validFileType.includes(file.type)) {
        alert('只能上傳jpg/png/jpeg格式的文件！');
        return;
      }
      if (file.size > this.maxFileSize) {
        alert('上傳文件大小超過限制！');
        return;
      }
      // 文件通過驗證，進行上傳操作
    }
  }
}

上面的代碼中，我們首先在數據對象中定義了一個數組validFileType和一個數值maxFileSize，分別表示允許上傳的文件類型和文件大小限制。handleFileUpload方法中，我們獲取到上傳的文件，根據文件類型和文件大小進行驗證，如果驗證通過，則執行上傳操作。

三、vue上傳文件到後端

在Vue中，我們可以使用axios庫進行後端請求。下面的代碼片段展示了如何使用axios庫，將上傳的文件發送到後端：

// 在template部分
<div>
  <input type="file" ref="fileInput" @change="handleFileUpload">
</div>

// 在script部分
import axios from 'axios';

export default {
  methods: {
    handleFileUpload() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/api/file/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

上面的代碼中，我們首先導入了axios庫。在handleFileUpload方法中，我們先獲取上傳的文件，創建FormData對象，並將文件添加到其中。然後我們使用axios發起POST請求，將FormData對象作為請求體，同時設置Content-Type為multipart/form-data。上傳成功後，控制台會列印出響應結果。

四、vue上傳文件到伺服器

除了上傳到後端，我們也可以將文件上傳到伺服器存儲。伺服器端代碼可以使用Node.js來實現。下面的代碼片段展示了如何使用Node.js和Express框架，將上傳的文件保存到伺服器上：

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload());

app.post('/api/file/upload', (req, res) => {
  const file = req.files.file;
  const fileName = Date.now() + '-' + file.name;
  file.mv(__dirname + '/uploads/' + fileName, error => {
    if (error) {
      console.log(error);
      return res.status(500).send(error);
    }
    res.send('文件上傳成功！');
  });
});

app.listen(3000, () => {
  console.log('伺服器已啟動，監聽埠號為3000');
});

上面的代碼中，我們首先使用npm安裝了express和express-fileupload兩個Node.js庫。在代碼中，我們使用fileUpload中間件來處理上傳的文件，然後在/api/file/upload路徑上設置了POST方法。在路由處理函數中，我們通過req.files獲取到上傳的文件，然後生成一個新的文件名，並使用mv方法將文件保存到伺服器上。上傳成功後，伺服器會返回成功信息。

五、vue上傳文件進度條

在上傳大型文件時，我們可以添加進度條，以使用戶了解上傳進度。下面的代碼片段展示了如何使用axios庫和vue-progressbar庫來實現上傳進度條：

// 在template部分
<div>
  <input type="file" ref="fileInput" @change="handleFileUpload">
  <vue-progress-bar :width="uploadPercentage"></vue-progress-bar>
</div>

// 在script部分
import axios from 'axios';
import VueProgressBar from 'vue-progressbar';

export default {
  components: {
    VueProgressBar
  },
  data() {
    return {
      uploadPercentage: 0
    }
  },
  methods: {
    handleFileUpload() {
      this.uploadPercentage = 0;
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/api/file/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
        }
      }).then(response => {
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

上面的代碼中，我們首先導入了VueProgressBar庫，然後在模板中添加了一個進度條組件。在數據對象中，我們定義了一個變數uploadPercentage，表示上傳進度百分比。在handleFileUpload方法中，我們在發送POST請求時，通過設置onUploadProgress回調函數來更新上傳進度。上傳結束後，進度條會自動消失。

六、vue上傳文件組件

我們可以將文件上傳封裝成一個Vue組件，使代碼更加模塊化。下面的代碼片段展示了如何實現文件上傳組件：

// 在模板部分
<template>
  <div>
    <label :for="id">選擇文件</label>
    <input type="file" :id="id" ref="fileInput" style="display: none" @change="handleFileUpload">
    <div v-if="uploadPercentage > 0">
      <vue-progress-bar :width="uploadPercentage"></vue-progress-bar>
    </div>
    <slot></slot>
  </div>
</template>

// 在script部分
import axios from 'axios';
import VueProgressBar from 'vue-progressbar';

export default {
  name: 'FileUpload',
  components: {
    VueProgressBar
  },
  props: {
    id: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      uploadPercentage: 0
    }
  },
  methods: {
    handleFileUpload() {
      this.uploadPercentage = 0;
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      axios.post(this.url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
        }
      }).then(response => {
        this.$emit('uploaded', response.data);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

上面的代碼中，我們將文件上傳封裝成一個名為FileUpload的組件，在模板中添加了一個input元素，通過props屬性傳遞id和url。在handleFileUpload方法中，我們使用axios庫發送POST請求，並通過設置onUploadProgress回調函數來實時更新上傳進度。上傳完成後，組件通過$emit方法發送uploaded事件，並將響應結果作為參數傳遞給父組件。

七、vue上傳文件夾

在Vue中，我們也可以上傳整個文件夾，而不只是單個文件。下面的代碼片段展示了如何使用HTML5的webkitdirectory屬性來實現上傳整個文件夾：

// 在模板部分
<template>
  <div>
    <input type="file" multiple webkitdirectory @change="handleFolderUpload">
  </div>
</template>

// 在script部分
import axios from 'axios';

export default {
  methods: {
    handleFolderUpload() {
      const files = Array.from(event.target.files);
      const formData = new FormData();
      files.forEach(file => {
        formData.append('files[]', file);
      });
      axios.post('/api/folder/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

上面的代碼中，我們在input元素中添加了multiple和webkitdirectory屬性，這樣可以支持上傳多個文件和整個文件夾。在handleFolderUpload方法中，我們首先通過Array.from方法將文件列錶轉換為數組，然後使用FormData對象將所有文件添加到其中。通過axios庫發送POST請求，將FormData對象作為請求體，上傳整個文件夾。

八、vue上傳文件列印jason

在Vue中，我們也可以上傳一個JSON格式的文件，並在上傳成功後列印JSON內容。下面的代碼片段展示了如何實現這個功能：

// 在模板部分
<template>
  <div>
    <input type="file" ref="fileInput" @change="handleJsonUpload">
  </div>
</template>

// 在script部分
export default {
  methods: {
    handleJsonUpload() {
      const file = this.$refs.fileInput.files[0];
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = event => {
        const json = JSON.parse(event.target.result);
        console.log(json);
      };
    }
  }
}

上面的代碼中，我們首先獲取上傳的文件，然後使用FileReader對象讀取文件內容。通過設置onload回調函數，我們將讀取到的文件內容轉換為JSON對象，並列印到控制台中。

九、Vue上傳文件跨域

在開發過程中，為了保證前端代碼和後端代碼可以分別部署在不同的伺服器上，我們需要進行跨域配置。下面的代碼片段展示了如何在Vue中配置跨域：

// 在項目的config目錄中創建index.js文件

module.exports = {

dev: {

proxyTable: {

'/api': { // 需要跨域的請求路徑

target: 'http://localhost:8080', // 目標伺服器地址

changeOrigin: true, // 改變referer

pathRewrite: {

'^/api': '/api' // 替換請求路徑

}

}

}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/304625.html