做教程的网站内容怎么找,网络营销方案撰写的内容与要求,河南郑州做网站汉狮,网站建设夬金手指排名壹柒文章目录 1、前言1、FileReader3、window.URL.createObjectURL4、参考链接 1、前言
一般来说#xff0c;都是 后端返回给前端图片的url#xff0c;前端直接把这个值插入到 img 的src 里面即可还有一种情况是前端需要预览一下图片#xff0c;比如#xff1a;上传头像按钮都是 后端返回给前端图片的url前端直接把这个值插入到 img 的src 里面即可还有一种情况是前端需要预览一下图片比如上传头像按钮前端需要临时 预览一下图片 这个时候就有两种方案了 方式一 转base64预览方式二 生成blob图片预览路径url
1、FileReader 可以利用 FileReader 把文件转成 base64格式 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput idfile1 typefile valueFileReader.readAsDataURL 方式 multiplescriptlet file1El document.querySelector(#file1)file1El.addEventListener(change, function (e) {// 可能会上传多个文件 let files e.target.filesconsole.log(files, files);if (files.length ! 0) {loadFiles(files).then((fileContents) {console.log(fileContents); // 在所有文件加载完成后打印包含所有文件内容的数组fileContents.forEach(f {let imgEl document.createElement(img)imgEl.src fimgEl.style.width 100pximgEl.style.height 200pxdocument.body.appendChild(imgEl)})}).catch((error) {console.error(error); // 处理错误情况});}})function loadFiles(files) {const promises []for (const item of files) {promises.push(readFile(item))}return Promise.all(promises);}// 利用 promise 封装一个生成 base64的 函数因为 onload 事件不是同步的它需要事件处理function readFile(file) {return new Promise((resolve, reject) {const reader new FileReader();reader.onload (event) {const result reader.result;if (typeof result string) {resolve(result);} else {reject(new Error(Failed to read file));}};reader.onerror (event) {reject(event.target.error);};// 参数file: 从中读取的 Blob 或 File 对象reader.readAsDataURL(file);});}/script/body/html3、window.URL.createObjectURL window.URL.createObjectURL 方法 返回一个 url可以直接放在 img 的src 属性上也可以直接放在浏览器打开 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput idfile2 typefile valuecreateObjectURL 方式 multiplescriptlet file2El document.querySelector(#file2)file2El.onchange function () {let files file2El.filesfor (const item of files) {// 接收 File、Blob 或 MediaSource 对象。let url window.URL.createObjectURL(item)console.log(url, url);let img document.createElement(img)// createObjectURL 返回的格式比如:blob: http://127.0.0.1:5500/3c9e3502-1c0c-4dae-b4dc-26b68f207285img.src urldocument.body.appendChild(img)}}/script
/body/html4、参考链接
createObjectURL MDNFileReader MDN
