图片文件在前端展示形式

图片文件在前端展示形式

1、读取文件并将其转化为dataUrl的形式，使其在页面中显示

const reader = new FileReader();      //读取文件的对象
reader.readAsDataURL(file); //对文件读取，读取完成后会将内容以base64的形式赋值给result属性
console.log(reader);//result: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABN8
reader.onload = function() { //读取完成的钩子
 	img.src = reader.result;
}

// 把选择的文件读取成BASE64(利用Promise进行异步状态管理)
const changeBASE64 = file => {
	return new Promise( resolve => {
		let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = ev => {
				resolve(ev.target.result)
        	}
    	}
    )
}

2、利用 window.URL.createObjectURL(file)

此方式生成的是一个blob形式的地址，可以直接在页面中进行展示

let fileUrl = window.URL.createObjectURL(file);
//生成指向blob的文件地址 blob:http://localhost:3000/2ce71e9f-5d7f-495a-9b43-9bd0b2c2424b
img.src = fileUrl;

3、图片的预览，需要将文件对象转化为BASE64，赋值给图片的SRC属性即可