基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式
文件上傳的幾種實(shí)現(xiàn)方式
form-data、base64、縮略圖、進(jìn)度條、拖拽上傳、切片上傳
1. Form-Data方式上傳
主要使用form表單方式實(shí)現(xiàn)文件上傳
let formData = new FormData(); console.log(this.file); formData.append('file', this.file); formData.append('filename', this.file.name); instance.post('/upload_single', formData).then(res => { if (+res.code === 0) { this.fileTip = '圖片上傳成功!' return; } return Promise.reject(res.codeText); }).catch(err => { console.log(err); })
2. BASE64方式上傳
使用FildReader獲取文件的base64,將其上傳
let base64 = await changeBase64(that.file); try { const data = await instance .post('/upload_single_base64', { file: encodeURIComponent(base64), // 防止亂碼 filename: that.file.name },{ headers: { 'Content-Type': 'application/x-www-form-urlencoded', } }) const { code } = data; if (code === 0) { this.fileTip = '文件上傳成功!'; } throw data.codeText; // 拋出異常 } catch (error) { console.log(error); }
3. 文件縮略圖顯示,文件hash獲取
根據(jù)文件內(nèi)容展示縮略圖(主要用于圖片),根據(jù)內(nèi)容獲取hash值判斷后端是否存在該文件,節(jié)省上傳時(shí)間
// 獲取文件hash值 const changeBuffer = (file) => { return new Promise((resolve) => { let fileReader = new FileReader(); fileReader.readAsArrayBuffer(file); fileReader.onload = (e) => { let buffer = e.target.result; const spark = new SparkMD5.ArrayBuffer(); spark.append(buffer); const HASH = spark.end(); const suffix = /\.([0-9a-zA-Z]+)$/.exec(file.name)[1]; resolve({ buffer, HASH, suffix, filename: `${HASH}.${suffix}`, }); }; }); }; // 展示縮略圖 let base64 = await changeBase64(file); upload_abber_img.src = base64;
4. 文件上傳進(jìn)度條實(shí)現(xiàn)
展示文件上傳進(jìn)度
try { let formData = new FormData(); formData.append('file', this.file); formData.append('filename', this.file.name); const data = await instance.post('/upload_single', formData, { onUploadProgress: (e) => { const { loaded, total } = e; upload_progress.style.display = 'block'; upload_progrees_value.style.width = `${ (loaded / total) * 100 }%`; }, }); if (+data.code === 0) { upload_progrees_value.style.width = `100%`; this.fileTip = '文件上傳成功!' return; } throw data.codeText; } catch (error) { console.log(e); this.fileTip = '文件上傳失敗!' } finally { upload_progress.style.display = 'none'; upload_progrees_value.style.width = `0%`; }
5. 文件拖拽上傳
使用原生JS事件 dragenter
、drop
、dragover
實(shí)現(xiàn)
dragenter(e) { e.preventDefault(); }, drop(e) { e.preventDefault(); const { dataTransfer: { files }, } = e; const file = files[0]; this.fileTip = uploadFile(file); }, dragover(e) { e.preventDefault(); }, uploadChange(e) { const file = e.target.files[0]; this.fileTip = uploadFile(file); }, const uploadFile = (file) => { const that = this; if (!file) { alert('請(qǐng)選擇您要上傳的文件~'); return; } let formData = new FormData(); formData.append('file', file); formData.append('filename', file.name); let flag = false; flag = instance .post('/upload_single', formData) .then(res => { if (res.code === 0) { return true; } return Promise.reject(res.codeText); }) .catch(err => { console.log(err); }) return flag ? '文件上傳成功!': '文件上傳失敗!'; }
6. 大文件切片上傳
- 首先確定上傳規(guī)模數(shù)量,判斷當(dāng)前文件可以切出多少切片,
- 利用Bole.prototype.slice() 方法對(duì)文件進(jìn)行切片并且對(duì)每個(gè)文件片作唯一標(biāo)識(shí)(HASH),
- 從服務(wù)器獲取已經(jīng)上傳的切片,判斷切片是否存在
- 將切片全部上傳后,后端進(jìn)行合并處理
let chunkList = [], alreadyChunkList = [], maxSize = 1024 * 1024, maxCount = Math.ceil(this.file.size / maxSize), index = 0; const { HASH, suffix } = await this.fileHash(this.file); if (maxCount > 10) { // 如果切片數(shù)量大于最大值 maxSize =this.file.size / 10; // 則改變切片大小 maxCount = 10; } while (index < maxCount) { chunkList.push({ file: this.file.slice(index * maxSize, (index + 1) * maxSize), filename: `${HASH}_${index + 1}.${suffix}`, }); index++; } // 先獲取已經(jīng)上傳的切片 const data = await instance.post( '/upload_already', { HASH: HASH, }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, } ); index = 0; const clear = () => { upload_progress.style.display = 'none'; upload_progrees_value.style.width = '0%' } const complate = async () => { index++; upload_progress.style.display = 'block'; upload_progrees_value.style.width = `${ (index / maxCount) * 100 }%`; if (index < maxCount) { return; } upload_progrees_value.style.width = `100%`; try { let res = await instance .post('/upload_merge', { HASH, maxCount }, { headers: {'Content-Type': 'application/x-www-form-urlencoded'} } ); if (res.code === 0) { this.fileTip = '大文件切片上傳成功!'; clear(); return; } throw data.codeText; } catch (error) { clear(); } } const { fileList } = data; alreadyChunkList = fileList; chunkList.forEach(item => { if (alreadyChunkList.length > 0 && alreadyChunkList.includes(item.filename)) { debugger // 切片已經(jīng)存在 complate() return; } const fm = new FormData(); fm.append('file', item.file); fm.append('filename', item.filename); instance .post('/upload_chunk', fm) .then(data => { if (+data.code === 0) { complate(); return; } return Promise.reject(data.codeText); }) .catch(() => { this.fileTip = '上傳失敗'; clear(); }) });
源碼 https://github.com/archer0621/fileUpload
總結(jié)
到此這篇關(guān)于基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)Vue實(shí)現(xiàn)文件上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用Three.js創(chuàng)建交互式3D場(chǎng)景的全過(guò)程
在現(xiàn)代Web開(kāi)發(fā)中,通過(guò)在頁(yè)面中嵌入3D場(chǎng)景,可以為用戶提供更加豐富和交互性的體驗(yàn),Three.js是一款強(qiáng)大的3D JavaScript庫(kù),它簡(jiǎn)化了在瀏覽器中創(chuàng)建復(fù)雜3D場(chǎng)景的過(guò)程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個(gè)簡(jiǎn)單的交互式3D場(chǎng)景,需要的朋友可以參考下2023-11-11vue-cli啟動(dòng)本地服務(wù)局域網(wǎng)不能訪問(wèn)的原因分析
這篇文章主要介紹了vue-cli啟動(dòng)本地服務(wù),局域網(wǎng)下訪問(wèn)不到的原因分析,在文中還給大家介紹了vue-cli起的webpack項(xiàng)目 用localhost可以訪問(wèn),但是切換到ip就不可以訪問(wèn) 的原因,本文給大家介紹的非常詳細(xì),需要的朋友參考下2018-01-01iView-admin 動(dòng)態(tài)路由問(wèn)題的解決方法
這篇文章主要介紹了iView-admin 動(dòng)態(tài)路由問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10vite的proxy查看真實(shí)請(qǐng)求地址方式詳解
這篇文章主要為大家介紹了vite的proxy查看真實(shí)請(qǐng)求地址方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06關(guān)于vue中根據(jù)用戶權(quán)限動(dòng)態(tài)添加路由的問(wèn)題
每次路由發(fā)生變化時(shí)都需要調(diào)用一次路由守衛(wèi),并且store中的數(shù)據(jù)會(huì)在每次刷新的時(shí)候清空,因此需要判斷store中是否有添加的動(dòng)態(tài)路由,本文給大家分享vue中根據(jù)用戶權(quán)限動(dòng)態(tài)添加路由的問(wèn)題,感興趣的朋友一起看看吧2021-11-11淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下2024-03-03