• vue中FileReader 的使用


    目录

    1 通过input 的 change 事件 获取所选文件信息

    2 通过 FileReader 读取文件 

    认识FileReader

    3 通过filereader的onload事件,获取事件读取完成时的文件内容(base64 编码)

     4 若input选择是图片,则可以通过定义一个变量,将返回的编码赋值给img的src属性,图片便可返显在页面

    1 通过input 的 change 事件 获取所选文件信息

    1. <script setup>
    2. const add = e => {
    3. console.log('e', e)
    4. console.log('e', e)
    5. }
    6. script>

    如图选中两个文件,查看add事件,并获取e.target属性,所选文件信息通过e.target.files获取

     files是个数组,如果input不加multiple属性,当前文件的信息需要通过files[0]获取

     

     

    2 通过 FileReader 读取文件 

    认识FileReader

    FileReader

    FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

    其中 File 对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

    属性

    FileReader.error 只读

    一个DOMException,表示在读取文件时发生的错误。


    FileReader.readyState 只读

    表示FileReader状态的数字。取值如下:

    常量名描述
    EMPTY0还没有加载任何数据。
    LOADING1数据正在被加载。
    DONE2已完成全部的读取请求。

    FileReader.result 只读

    文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。​​​​​​​

    事件处理

    FileReader.onabort

    处理abort事件。该事件在读取操作被中断时触发。

    FileReader.onerror (en-US)

    处理error事件。该事件在读取操作发生错误时触发。

    FileReader.onload

    处理load事件。该事件在读取操作完成时触发。

    FileReader.abort()

    中止读取操作。在返回时,readyState属性为DONE

    FileReader.readAsArrayBuffer()

    开始读取指定的 Blob中的内容,一旦完成,result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。

    FileReader.readAsBinaryString() 非标准

    开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。

    FileReader.readAsDataURL()

    开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

    FileReader.readAsText()

    开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。

    3 通过filereader的onload事件,获取事件读取完成时的文件内容(base64 编码)

    FileReade​​​​​​​r.readAsDataURL()

    readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 FileReader.result 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。

     

     4 若input选择是图片,则可以通过定义一个变量,将返回的编码赋值给img的src属性,图片便可返显在页面

    1. <script setup>
    2. import { ref } from 'vue'
    3. const imgSrc = ref('')
    4. const add = e => {
    5. console.log('e', e)
    6. console.log('e.target.files', e.target.files)
    7. const file = e.target.files[0]
    8. let reader = new FileReader()
    9. console.log('reader', reader)
    10. reader.readAsDataURL(file)
    11. reader.onload = e => {
    12. console.log('e----', e)
    13. console.log('e.target.result', e.target.result)
    14. imgSrc.value = e.target.result
    15. }
    16. }
    17. script>

  • 相关阅读:
    2023/11/21JAVAweb学习
    [计算机入门] Windows附件程序介绍(游戏类)
    this.$set,更新vue视图
    Spring | Spring的“数据库开发“ (Srping JDBC)
    工作流(Flowable)
    等时替代模型( Isotemporal Substitution Model)
    AI发展下的伦理挑战,应当如何应对?
    【sleuth + zipkin 服务链路追踪】
    SwiftUI的认识与使用
    【数据结构】顺序查找,折半查找,分块查找的知识点总结及相应的代码实现
  • 原文地址:https://blog.csdn.net/m0_66051368/article/details/127913054