vue上传图片组件编写代码

vue上传图片组件编写代码

本文实例教大家如何编写一个vue上传图片组件，具体如下

1.首先得有一个[type=file]文件标签并且隐藏，changge事件来获取图片：

2.触发隐藏的文件标签：（通过原生的click来触发）

document.getElementById('upload_file').click()

3.获取file文件里面的值方法：fileChange($event)

fileChange(el){

if (!el.target.files[0].size) return;//判断是否有文件数量

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]);

}

}

处理获取到的图片文件，统计文件大小，转图片为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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。