vue上傳圖片組件編寫代碼
本文實例教大家如何編寫一個vue上傳圖片組件,具體如下
1.首先得有一個[type=file]文件標簽并且隱藏,changge事件來獲取圖片:
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
2.觸發(fā)隱藏的文件標簽:(通過原生的click來觸發(fā))
document.getElementById('upload_file').click()
3.獲取file文件里面的值方法:fileChange($event)
fileChange(el){
if (!el.target.files[0].size) return;//判斷是否有文件數(shù)量
this.fileList(el.target.files);//獲取files文件組傳入處理
el.target.value = ''//清空val值,以便可以重復添加一張圖片
}
4.處理files文件組
獲取傳入單個圖片文件
fileList(files){
for (let i = 0; i < files.length; i++) {
this.fileAdd(files[i]);
}
}
處理獲取到的圖片文件,統(tǒng)計文件大小,轉圖片為base64以供顯示
fileAdd(file){
this.size = this.size + file.size;//總大小
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
},
5.文件大小換算
bytesToSize(bytes){
if (bytes === 0) return '0 B';
let k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
},
6.拖拽上傳
<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)"> 或者將文件拖到此處 </div>
dragenter(el){
el.stopPropagation();
el.preventDefault();
},
dragover(el){
el.stopPropagation();
el.preventDefault();
},
drop(el){
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer.files);
}
最終效果如下:

點擊打開源碼 https://github.com/317482454/vue_upload
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- vue+element實現(xiàn)圖片上傳及裁剪功能
- vue.js 實現(xiàn)圖片本地預覽 裁剪 壓縮 上傳功能
- cropper js基于vue的圖片裁剪上傳功能的實現(xiàn)代碼
- vue實現(xiàn)移動端圖片裁剪上傳功能
- Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預覽和刪除功能詳解
- vue中使用elementUI組件手動上傳圖片功能
- vue+elementUi圖片上傳組件使用詳解
- 基于vue-upload-component封裝一個圖片上傳組件的示例
- vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理
- require.js+vue開發(fā)微信上傳圖片組件
- vue 圖片裁剪上傳組件的實現(xiàn)
相關文章
VUE實現(xiàn)一個Flappy Bird游戲的示例代碼
這篇文章主要介紹了VUE實現(xiàn)一個Flappy Bird的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
在vue框架下使用指令vue add element安裝element報錯問題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+element獲取el-table某行的下標,根據(jù)下標操作數(shù)組對象方式
這篇文章主要介紹了vue+element獲取el-table某行的下標,根據(jù)下標操作數(shù)組對象方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨想過來看看吧2020-08-08
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07

