在使用Vue作為前端框架時,上傳文件是一個常見的需求。同時,我們也需要刪除無用的文件來節省空間。Vue提供了一些簡單的方法來實現上傳和刪除。以下是一些關于如何在Vue中上傳和刪除文件的步驟。
刪除文件: deleteFile(file){ let arr = this.files; for (let i = 0; i< arr.length; i++) { if (arr[i].name === file.name) { this.files.splice(i,1); this.uploaded.splice(i,1); return; } } }
我們可以用deleteFile函數來刪除文件。這個函數會從Vue實例的“files”數組中找到要刪除的文件。找到文件后,函數會用splice方法將該文件從數組中刪除。同樣,這個函數也會從“uploaded”數組中刪除相應的文件。最后,這個函數會返回一個值。
上傳文件: uploadFile(event){ let file = event.target.files[0]; this.uploaded.push(false); let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () =>{ let dataURL = reader.result; let formData = new FormData(); formData.append("file", file); axios.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress: (progressEvent) =>{ let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(percentCompleted); } }).then(response =>{ this.files.push(file); this.uploaded.pop(); this.uploaded.push(true); this.fileUrl = response.data.url; }); } }
我們在Vue實例中定義了一個uploadFile函數來上傳文件。該函數使用“axios”來處理文件上傳。函數使用“FormData”來包裝要上傳的文件。我們還要為上傳進度設置一個回調函數。最后,上傳完成后,我們將文件推入Vue實例的“files”數組中,并將上傳完成的標志推入“uploaded”數組中。
總的來說,Vue提供了一些方便易用的方法來實現文件上傳和刪除。我們只需要在Vue實例中添加一些所需的函數和變量即可完成這些任務。
上一篇vue ui框架手冊
下一篇vue 開發離線app