使用readAsDataURL过程中遇到的问题

最新推荐文章于 2024-06-01 11:10:28 发布
最新推荐文章于 2024-06-01 11:10:28 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： 踩坑日记 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nhq2018/article/details/125062446
版权

项目场景：

用户头像编辑: 需要用户从本地选择图片后, 能在本地预览和简单编辑图片

问题描述

使用的readAsDataURL生成图片的本地预览地址。用户选择小图片时还好，一旦超过5M, 选择后会卡一下，后面的简单编辑（使用了图片的css属性clip）更是卡的不行

getImgSize(imgFile) {
   
  return new Promise((resolve, reject) => {
   
    let reader = new FileReader();
    reader.readAsDataURL(imgFile);
    reader.onload =
最低0.47元/天 解锁文章
在知识的海洋里奋力狗刨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web图片预览详情及file和readAsDataURL
Jinjinjinx的博客
08-13 370
今天在写自己的项目的时候遇到了一个问题，我需要能够在页面上预览我所添加的图片。通过向别人学习，自己也总结了一些知识点，解决了问题之后，现在做一个总结，代码如下 var imgUrlData; $("#imgFile").change(function(){ const file = this.files[0]; //获取到当前图片 let reader = new FileReader()...
html5文件上传使用拖放api技术项目报告
11-08
在实际运行过程中，可能遇到的问题如文件乱码和大文件读取。对于乱码问题，可以通过设置HTML文档的字符集（`<meta charset="utf-8">`）和编辑器的编码方式来解决。对于大文件读取，可以利用`Function.apply`配合`...
前端--文件上传--文件切片--利用FileReader()中的readAsDataURL()做缩略图--多文件上传--formData--切片上传实现
墨苒孤的博客
04-12 2516
前端最常见的就是添加一个multiple 属性，这样在上传的时候只要按住Ctrl 就可以选择多个文件了，这样的方式对用户不够友好，因为有些用户是不知道按住Ctrl 可以选择多个文件的，一般来说，用户只会一个文件，一个文件来上传的。图片可以通过转成Base64 的方式，文件一般使用 formData来进行传输，可以说，formData 就是一个载体，负责装载文件。//用户一个一个选择文件，直接push存储起来，符合用户习惯。//结合 multiple属性，可以上传多个文件，"文件大小不能超过10M"
js中readAsDataURL的意思，可以用于浏览器预览图像文件或者转成base64字符串
最新发布
weixin_54048131的博客
06-01 149
使用FileReader对象的readAsDataURL方法来读取图像文件
热门推荐
火星男孩的分享空间
04-19 4万+
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......使用
java怎么筛选图片文件_vue使用readAsDataURL实现选择图片文件后预览
weixin_36265665的博客
02-27 366
vue实现选择图片文件后预览利用h5的api可以实现选择文件并实现预览readasdataurl方法会读取指定的 blob 或 file 对象。读取操作完成的时候，readystate 会变成已完成done，并触发 loadend 事件，同时 result 属性将包含一个data:url格式的字符串(base64编码)以表示所读取文件的内容方式引入vue文件文件选择框,并添加change事件，和d...
vue3+element-plus el-upload上传图片使用FileReader对象的readAsDataURL方法来读取图像文件
weixin_50041614的博客
09-07 2246
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。上传前的钩子方法获取要上传的文件。使用Img显示图像文件。
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的...在Vue项目中，通过将axios注入到原型链，可以更方便地在各个组件中使用。
浅谈用Webpack路径压缩图片上传尺寸获取的问题
08-28
总结来说，处理Webpack路径压缩后的图片上传问题，我们需要理解Webpack对图片资源的处理方式，并利用`FileReader`的API来获取图片的Data URL，以便在上传过程中进行尺寸和大小的检查。这个案例展示了在实际开发中...
开发中经常用的图片和JS弹出框
04-07
在开发过程中，图片和...但上述内容已经涵盖了图片使用和JavaScript弹出框的基本概念和实践技巧，这些都是开发中经常遇到的问题。了解并掌握这些知识点，能够帮助开发者更好地创建功能丰富且用户体验良好的Web应用。
一个文件上传Vue2插件可以拖动文件或在对话框中选择要上传的文件
08-10
在文件上传过程中，可能会遇到各种错误，如网络问题、文件过大、服务器返回错误等。良好的错误处理机制可以帮助用户理解问题并采取相应措施。 综上所述，这个Vue2文件上传插件“v-uploader”不仅提供了基本的文件...
JavaScript使用readAsDataURL读取图像文件
12-10
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。 参考以下使用readAsDataURL读取图像文件范例： <!DOCTYPE html> <html xmlns = "http://www.w
使用readAsDataURL方法预览图片
sanmingzi3344的专栏
02-13 1万+
使用FileReader接口的readAsDataURL方法实现图片的预览。 源代码： 通过filereader接口读取文件 function readAsDataURL() { if(typeof FileReader=='undifined') //判断浏览器是否支持filereader { result.innerHTML="抱歉，你的浏览器不支持 FileReade
FileReader 中的readAsDataURL 选择图片文件后即使预览图片
qq_42705221的博客
11-05 2万+
1：FileReader : 读取文件内容             readAsText() 读取文本文件，(可以使用Txt打开的文件)             readAsBinaryString(): 读取任意类型的文件，返回二进制字符串             readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件 ...
区分 window.URL.createObjectURL() 和 FileReader.readAsDataURL()
huoren_no1的博客
09-01 1485
URL.createObjectURL() 语法 objectURL = URL.createObjectURL(object); 参数 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象 返回值 一个DOMString包含了一个对象URL，该URL可用于指定源 object 的内容 作用 该方法生成一个 URL 对象可以直接赋值给 DOM 元素的 src 属性 该方法生成一个 URL 对象还可以作为 a 标签的 href 属性值，用于下载或
使用readAsDataURL预览图片
petterp的博客
08-01 1万+
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用FileReader接口读取文件</title> </head> <body> <script> function read(){ ...
js readAsDataUrl方法实现多图预览
xioxi
08-28 676
<input type="file" name="cli[ ]" multiple lay-verify="files" class="layui-input" onchange="inputChanges()" id="fileimgs"> function inputChanges(){ var files = document.getElementById('fileimgs').files; if(files.length == 0) return;
readAsDataURL
09-11
`readAsDataURL` 是 JavaScript File API 中的一个方法，可用于将文件读取为数据 URL。它可以用于在浏览器中预览图像文件或将文件转换为 base64 编码的字符串。 使用 `readAsDataURL` 方法需要创建一个 `FileReader` 对象，并将要读取的文件传递给它。然后，通过监听 `FileReader` 对象的 `onload` 事件，在事件处理函数中可以获取到读取的数据 URL。 以下是一个简单的示例代码： ```javascript function handleFileSelect(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var dataURL = reader.result; console.log(dataURL); // 在这里可以对数据 URL 进行进一步处理 }; reader.readAsDataURL(file); } var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', handleFileSelect, false); ``` 在上面的示例中，我们创建了一个文件输入元素（id 为 "fileInput"），当用户选择文件后，会触发 `change` 事件，然后调用 `handleFileSelect` 函数来处理选中的文件。在 `handleFileSelect` 函数中，我们创建了一个 `FileReader` 对象并将文件传递给它，然后监听 `onload` 事件，在事件处理函数中获取到读取的数据 URL。 请注意，由于安全性限制，浏览器可能会阻止在没有用户交互的情况下自动触发文件选择操作（例如使用 JavaScript）。因此，通常需要通过用户手动选择文件来触发 `handleFileSelect` 函数。 希望这可以回答您的问题！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值