欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue axios onupload

老白2年前7瀏覽0評論

在Vue.js中,我們可以使用Axios庫來處理HTTP請求。其中的onUpload事件可以用來監聽上傳的過程。下面來看一下怎樣使用這個事件。

<template>
<div>
<input type="file" @change="handleUpload">
</div>
 </template>
 <script>
import axios from 'axios';
export default {
methods: {
handleUpload(event) {
let file = event.target.files[0];
let formData = new FormData();
formData.append('file', file);
let config = {
onUploadProgress: progressEvent => {
console.log(Math.round(progressEvent.loaded / progressEvent.total * 100) + '%');
}
}
axios.post('/upload', formData, config)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
 </script>

在上面的代碼中,我們首先使用了input標簽來創建一個文件上傳的輸入框。當用戶選擇文件后,@change事件觸發handleUpload方法,該方法會先將選擇的文件封裝成FormData對象,然后通過axios.post方法將文件上傳到服務器的/upload路徑下。

除此之外,該代碼還定義了一個config對象來處理上傳進度。在config中可以使用onUploadProgress方法來監聽上傳進度,這個方法會在上傳過程中被多次調用,它的參數progressEvent包含了當前上傳進度的信息:已經上傳的字節數、總字節數、上傳速度等等。

最后,通過.then方法和.catch方法分別處理上傳成功和上傳失敗的情況。在.then方法中,我們打印出了服務器返回的響應結果;而在.catch方法中,我們打印出了上傳失敗的錯誤信息。