抛出问题2：页面如何展示图片

1.首先监听上传的图片

FileList对象来自于HTML的files属性，可以通过e.files访问，当上传图片时会触发onchange事件，通过e.files拿到当前上传图片的信息

function imgChange(e) {
      console.log(e.files);
2.处理图片信息
2.1 使用FileReader对象读取文件
const fileReader = new FileReader();
fileReader.readAsDataURL(e.files[0]);
fileReader.addEventListener("load", function () {
	let res = fileReader.result;
	document.querySelector("#img_base_64_show").src = res;
	console.log(res);
监听filereader的load事件，通过filereader.result可以获取图片的base64格式，可以用于页面的图片展示

2.2 使用blobUrl来展示
let file = e.files[0];
      var blob = new Blob([file], { type: file.type });
      var url = URL.createObjectURL(blob);
      console.log(blob, url);
      document.querySelector("#img_show").src = url;

 
Blob URL 是通过将 Blob 对象生成一个 URL 来实现展示二进制文件的方式。
Base64 和 Blob URL 展示图片的优缺点
Base64
Base64 是一种将二进制数据编码成 ASCII 字符串的方法。前端中通常使用 Base64 来解决图片、音频等二进制文件无法直接传输的问题。下面是 Base64 的优缺点：
方便传输：Base64 可以通过 HTTP 协议直接传输，无需额外的请求。
简化操作：使用 Base64 可以避免一些繁琐的操作，如在服务器端对图片进行处理，通过代码上传至 CDN 等步骤。
减轻服务器压力：使用 Base64 可以减轻服务器端的压力，因为传输的是字符串，可以避免频繁读写硬盘。
增加体积：Base64 编码会使二进制数据的体积增大约三分之一左右，因此会占用更多网络带宽和浏览器内存。
降低加载速度：相比于直接加载本地或远程图片，Base64 编码的图片需要客户端将其转换成二进制数据，并解码成图片，所以会降低页面的加载速度。
不便于缓存: 因为 Base64 图片是内嵌在 HTML 或 CSS 中的，无法像普通图片那样被浏览器缓存。
Blob URL
Blob URL 是通过将 Blob 对象生成一个 URL 来实现展示二进制文件的方式。下面是 Blob URL 的优缺点：
较小体积：相比于 Base64 编码的字符串，Blob URL 只有一个字符串地址，因此在大小上会更加小巧。
快速加载：由于只需要加载一条 URL 地址，而不需要额外进行转换操作，因此大大提高了页面的加载速度。
可被浏览器缓存：与常规的图片 Url 相同，Blob URL 的图片可以被客户端浏览器本地缓存，提高用户访问速度。 

不便传输：Blob URL 生成的 URL 只能在浏览器中使用，无法直接传输给服务器端。
获取困难：获取 Blob 对象并不像获取 Base64 数据那样方便，需要通过 XMLHttpRequest、FileReader 等对象才能得到 Blob 对象。
兼容性问题：Blob URL 在 IE10 及以下版本浏览器不支持，在移动端 iOS 系统上也有兼容性问题。
总的来说，Base64 和 Blob URL 都有各自的优点和缺点，我们在实际开发中需要根据实际情况选择使用哪种方式。如果你需要传输文件到服务器端、需要跨域访问则可以使用 Base64 编码；如果要保证加载速度、可被浏览器缓存，那么建议使用 Blob URL 的方式展示图片。
1.前端展示的话可以使用BlobUrl来做，后端存储的话，可以将base64存放在后端，如Minio中。在拿到数据后，前端转化为BlobUrl进行展示。
2.通过input元素可以实现图片的上传，在一些组件库中，可以隐藏input框，来美化图片上传控件。
3.同样的，上述图片的展示也可以用于pdf的展示，使用HTML<embed>元素将外部内容嵌入文档中的指定位置。
 





    
 
   
相关推荐
 
   纯前端图片转换base64
 
首先要有一个url，然后用images转成image对象，然后添加crossOrigin是最重要的，不然会报错， 然后再图片加载完毕之后再去转换成base64就好了 顺手封装了一下 复制上面代码到一个
 
  
                汪汪队立大功
          
 
 
  
   base64转file文件格式 vue中将base64转file文件格式
 
let arr = dataurl.mime = arr[0].match(/:(.n = bstr.u8arr[n] = bstr.import { dataURLtoFile } from "@/assets/...dataURLtoFile(this.个人前端博客 http...
 
  
          
 
 
  
   h5中文件下载
 
封装一个单独的js，用来实现将请求结果转成二进制文件流的形式，来触发浏览器自身的下载功能。
 
  
          
 
 
  
   input输入框实现文件上传
 
使用input实现自定义文件上传组件.使用Input输入框实现文件上传功能,并能够改变按钮中的文字,样式,显示文件名称,还能够限制文件格式
 
  
                菜菜爱前端爱好者
          
 
 
  
   vue预览上传图片
 
最近做公司某某活动，里面有个图片预览上传的功能。为了KPI分享文章原创的40%，匆忙动手写下，欢迎各种吐槽。 当当当，完成了!!! 请欣赏效果如下图。
 
  
            
 
 
 
 
 
  
   base64图片转文件流
 
一个完整的图片base64应包含mime类型和内容信息，欲转换图片先提取出其中的mime类型用以指定转换后文件的类型和文件后缀，如转换代码如下：以上~
 
  
                migucc
            JavaScript
          
 
 
  
   js保存文件到本地
 
使用原生方法保存文件到本地 基本流程 确定要保存的文本、保存格式及保存文件类型； 根据保存格式生成 url链接，设置文件的下载地址； 创建一个 a 标签（即a标签指向的就是我们要保存的文件）； 给 a
 
  
                Rain1112022
            JavaScript
          
 
 
  
   vant上传组件van-uploader上传组件遇到的坑，上传多张图片顺序错乱问题，支持并行上传
 
问题描述： 移动端使用van-uploader上传组件遇到的坑，连续快速上传多个图片后可能会出现顺序错乱问题，尤其是拍照上传情况下 定位问题： 快速上传图片接口返回顺序与上传时存在不一致的情况（由于图
 
  
                Pretty6
          
 
 
  
   canvas 图片跨域解决方案
 
图片为什么会出现跨域这里不再赘述、不明白的同学自行百度。在这里直接提供可行的解决方案 注意： 如果出现 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted ca…
 
  
                __不会游泳的鱼__
            Canvas
          
 
 
  
   vue+vant使用图片预览功能ImagePreview的问题
 
如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图： 着实让员外百思不其解，在调用vant 的 ImagePreview )图片预览组件中，没有ht…
 
  
            Vue.js
          
 
 
  
   正则表达式获取url后的内容/二进制转base64图片/对象转换为byte数组
 
1、通过扫码进入小程序，需要获取到二维码带进来的内容。再将其转换为对象类型 2、二进制要转成base64图片 3、对象转换为byte数组
 
  
                白菜new
          
 
 
  
   VUE文件上传，以文件流的形式下载，以文件流预览PDF
 
 
  
                今天的砖搬完了吗
            Vue.js
          
 
 
  
   vue封装原生可预览裁剪上传图片插件兼容H5
 
思路：1.先做出一个上传的图片的上传区 给上传图片的input绑定上ref属性然后通过FileReader构造函数获取上传的文件。 2.完成已上传文件的预览区域 在upload方法中将通过FileRe
 
  
                SadicZhou
          
 
 
  
   base64文件下载函数封装
 
后端返回base64文件，前端直接下载，后端返回base64文件，前端直接下载，后端返回base64文件，
 
  
                狂按ctrl键
            JavaScript
          
 
 
  
   js 文件下载
 
那就是基于 <a> 标签的下载文件方式，真的是超级简单。使用方法如下： 会独立打开一个窗口，发起该请求，当请求完成后，该界面会自动关闭。 如果文件不是 .png .gif .jpg 这种照片格式，可采用 window.open(url, '_blank') 下载。
 
  
            JavaScript
          
 
 
  
 
友情链接：
 

        linux mysql devel
        python 100 素数
        0基础的人适合学java么
    马腾化云东
      文章被阅读
         10,714
      抛出问题1：如何实现文件的上传
      使用html的input元素可以实现文件的上传
      抛出问题2：页面如何展示图片
      1.首先监听上传的图片
      2.处理图片信息
      2.1 使用FileReader对象读取文件
      2.2 使用blobUrl来展示
      Base64 和 Blob URL 展示图片的优缺点
      Base64
      Blob URL