1.介绍
VUE是一套用于构建用户界面的渐进式框架。由于其易用性和巨大的社区支持，VUE已成为web开发中最受欢迎的框架之一。在这篇文章中，我们将介绍如何使用VUE来生成和展示图片的缩略图。
2.实现缩略图
2.1 安装插件
要生成缩略图，需要安装插件。其中，vue-image-blob-uploader是一个插件，它可以方便地生成缩略图。
npm install vue-image-blob-uploader --save
2.2 代码实现
接下来，我们将学习如何使用vue-image-blob-uploader插件来生成和展示缩略图。
下面是在VUE中生成和展示缩略图的代码：
<template>
<div>
<input type="file" @change="onFileChange" />
<img :src="thumbnail" />
</div>
</template>
<script>
import VueImageUploader from 'vue-image-blob-uploader';
export default {
components: {
VueImageUploader
},
data() {
return {
thumbnail: ''
};
},
methods: {
onFileChange(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = e => {
this.$refs.vueImageUploader.generateFromImage(file, 200, 200, 70, data => {
this.thumbnail = data.blobUrl;
},
'image/jpeg', 0.6);
};
reader.readAsDataURL(file);
}
}
};
</script>
上面的代码中，我们使用了<input>标签来选择文件，并使用生成的缩略图替换了<img>标签中的图片。
2.3 解释代码
在上面的代码中，我们使用了Vue的组件生命周期函数created()。这将为我们初始化VueImageUploader插件和thumbnail图像。
在onFileChange方法中，我们使用FileReader API来读取所选文件并生成缩略图。我们使用generateFromImage()方法将图像转换为Blob URL，以供稍后在<img>标记中使用。在这里，我们可以指定生成缩略图的大小和质量。
最后，我们将生成的Blob URL分配给thumbnail属性，以便在<img>标记中显示。
3.总结
在这篇文章中，我们学习了如何使用vue-image-blob-uploader插件来生成和展示缩略图。我们了解了如何使用组件生命周期函数created()来初始化VueImageUploader插件，并使用onFileChange()函数来生成和展示缩略图。这个简单的例子不仅告诉我们如何处理图像，而且告诉我们如何在Vue中使用插件来使我们的工作更有效率。