「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之文件上傳（十）

基于Vue和Quasar的前端SPA項目實戰之文件上傳（十）

回顧

通過之前一篇文章 基于Vue和Quasar的前端SPA項目實戰之數據導入（九）的介紹，實現了業務數據批量導入功能，本文主要介紹文件上傳相關內容。

簡介

crudapi支持附件字段，表字段里面保存的是文件url字符串。附件可以通過其它文件管理系統比如阿里云的OSS進行上傳，或者使用系統自帶的文件管理API進行上傳，包括普通文件上傳和大文件切片上傳兩種方式。

UI界面

文件上傳

大文件上傳

API

文件上傳API，包括普通文件上傳和大文件切片兩個功能，具體的通過swagger文檔可以查看。通過axios封裝api，名稱為file

import { axiosInstance } from "boot/axios"; const HEADERS = { "Content-Type": "multipart/form-data" }; const file = { upload: async function(data, progressCallback) { console.log("file->upload") return axiosInstance.post(`/api/file` , data, { headers: HEADERS, onUploadProgress: (progressEvent) => { if (progressCallback) { progressCallback(progressEvent) } } }); }, bigUpload: async function(data, progressCallback) { console.log("file->bigUpload") return axiosInstance.post(`/api/file/big` , data, { headers: HEADERS, onUploadProgress: (progressEvent) => { if (progressCallback) { progressCallback(progressEvent) } } }); } }; export { file };

核心代碼

CFile組件

通過toggle切換上傳模式，如果是小文件采用普通的方式即可。

普通上傳

async onSubmitClick() { console.info("CFile->onSubmitClick"); if (!this.normalFile) { this.$q.notify({ message: '請選擇文件！', type: 'warning' }); return; } this.$q.loading.show({ message: "上傳中" }); try { let form = new FormData() form.append('file', this.normalFile); this.fileInfo = await fileService.upload(form, (e)=> { console.info(e); }); this.$q.loading.hide(); this.$emit("input", this.fileInfo); } catch (error) { this.$q.loading.hide(); console.error(error); } }

大文件切片上傳

bigFileAdded(f) { console.info("CFile->fileAdded"); if (!f) { console.info("CFile->cancel"); return; } this.$q.loading.show({ message: "文件準備中" }); FileMd5(f, this.chunkSize, (e, md5) => { this.md5 = md5; console.info(e); console.info(md5); this.$q.loading.hide(); }); }, async onBigSubmitClick() { console.info("CFile->onBigSubmitClick"); if (!this.bigFile) { this.$q.notify({ message: '請選擇文件！', type: 'warning' }); return; } this.$q.loading.show({ message: "上傳中" }); try { let chunks = this.getChunks(); let reqs = []; for (let i = 0; i < chunks; ++i) { reqs.push(this.uploadWithBlock(i)); } await Promise.all(reqs) .then((datas) => { console.info(datas); this.checkFinished(datas); }); } catch (error) { this.$q.loading.hide(); console.error(error); } }

大文件如果采用普通的上傳方式，可能由于網絡的原因速度比較慢，而且不穩定，所以采用切片的方式進行多線程上傳。具體原理如下：首先計算文件MD5，后臺會根據MD5唯一確定是同一個文件，同一個文件的不同block根據大小和偏移量會寫在相同文件對應的位置，當最后一個block上傳成功后，表示上傳結束。分片大小默認為20MB，可以配置為需要的值，前端通過Promise.all的ajax調用方式可以實現多線程同時上傳。

文件表為例

文件表的“鏈接”字段設置類型為“附件ATTACHMENT”，添加業務數據頁面會自動采用CFile組件。

選擇大文件之后，點擊上傳圖標，通過chrome網絡請求發現，多線程分片上傳模式已經啟動，上傳結束之后可以查看下載。

小結

本文主要介紹了文件上傳功能，包括普通上傳模式和大文件切片上傳模式，大文件切片上傳模式通過優化后很容易支持斷點續傳和秒傳，后續會根據需求優化文件上傳功能。

demo演示

官網地址：https://crudapi.cn

測試地址：https://demo.crudapi.cn/crudapi/login

附源碼地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

由于網絡原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。

API Java JavaScript MySQL Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。