Vue封装一个图片回显的实例.

最新推荐文章于 2024-05-24 10:55:30 发布

沙漏在下雨

最新推荐文章于 2024-05-24 10:55:30 发布

阅读量409

点赞数 1

分类专栏： Vue 文章标签： vue html javascript css js

本文链接：https://blog.csdn.net/qq_45906219/article/details/115759344

版权

本文介绍如何使用Vue.js封装一个图片上传组件，并实现图片预览功能。关键点包括逻辑层中处理文件的函数，接收blob对象并生成在线URL，以及通过isEmitBack属性决定是否将图片信息返回给父组件。CSS和HTML部分则展示了组件的样式和结构设计。

摘要由CSDN通过智能技术生成

在这里插入图片描述

如图，这个案例实现一下，使用Vue封装了一个图片上传，且回显到本地的一个小组件。

关键点：

window.URL.createObjectURL 使用这个函数，接受一个files, blob 对象，然后返回一个在线的URL链接，然后我们就可以把这个链接返回给我们.
外部传入 isEmitBakc (props) 决定是否将获得到的对象发射回去，从而去替图片的默认排列方式。

逻辑层：

	export default{
   
		name:"imgBack",
		props:{
   
			// 是否将文件发射回去 如果传入 true 则把对象发射回去
			isEmitBack:{
   
				type: Boolean,
				default:false
			}
		},
		data(){
   
			return {
   
				Ffiles:[],
				bigimg:"", // 大图
			}
		},
		methods:{
   
			handleFile(e){
   
				// 处理文件
				const _target = e.target ? e.target : e.srcElement;
				for (let s of _target.files) {
   
					//  这个列表只是用来回显， 如果发送给服务器
					//  使用 Formdata 用来封装一下 
					this.Ffiles.push(window