二进制图片通过URL.createObjectURL()转化为url实现图片预览,二进制数据,图像通过FormData对象进行传输

风无雨
957 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

1.什么是二进制图片

二进制图片是指图片是二进制文件，图片保存在磁盘是二进制文件。

2.为什么不能直接使用二进制文件用来图片预览和传输数据

2.1实现图片预览的流程

  • (1).file表单获取图片
  • (2)把获取的图片数据赋值给img的src属性
    实现代码如下:
<body>
    <input type="file">
    <img src="" alt="">
</body>
<script>
    document.querySelector('input').addEventListener('change', function (e) {
        //事件对象
        console.log(e)
        const file = document.querySelector('input').files[0]
        // 读取的图片文件
        console.log(file);
        // 设置图片的src
        document.querySelector('img').src = file
    })
</script>
  • 看起来很完美,但是却实现不了 image.png
  • 我们发现file文件img识别不了,file文件控制台输出如下:

image.png

2.2实现二进制图片数据传输的过程

  • (1)file表单获取图片
  • (2)通过ajax传输图片

实现代码如下:

    <div class="thumb-box">
        <!-- 头像 -->
        <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="" />
        <div class="mt-2">
            <input type="file" id="iptFile" accept="image/*" />
        </div>
    </div>
    <script src="./lib/axios.js"></script>
    <script>
        //1. file表单注册change
        document.querySelector('input[type="file"]').addEventListener('change', async function () {
            const file = this.files[0]
            const { data: res } = await axios.post('/api/upload/avatar', { avatar: file })
            console.log(res);
        })
  • 看起来很完美,但是却实现不了

image.png

  • 我们发现直接 把从input[type='file']获取的图片file直接作为数据发送ajax,发送不了
  • 在网络请求中我们发现我们发送的{avatar:file}直接显示为空

image.png

  • 在下文中将依次处理无法实现二进制图片预览和无法实现二进制图片传输的问题

3.具体如何实现二进制图片预览和传输

3.1通过URL对象的createObjectURL方法,把二进制文件转化为url实现图片预览

image.png
代码如下:

<body>
    <input type="file">
    <img src="" alt="" width="200px">

</body>
<script>
    document.querySelector('input').addEventListener('change', function (e) {
        //事件对象
        console.log(e)
        const file = document.querySelector('input').files[0]
        // 读取的图片文件
        console.log(file);
        // 设置图片的src
        const url = URL.createObjectURL(file);
        console.log(url)
        document.querySelector('img').src = url
    })
</script>

注意点:

  • 1.获取图片文件时要e.target.files[0],这是因为files是一个数组,当我们只有一个文件时,取他的第一个元素即可
  • 2.通过URL对象的createObjectURL方法,把二进制文件转化为url
  • 3.获取imgdom对象,设置img.src为url
  • 4.URL.createObjectURL()创建的是一个blob地址,可以让img.src显示图片

image.png

3.2 二进制数据,图像通过FormData对象进行数据传输

image.png

image.png 实现代码如下：

<body>
    <div class="thumb-box">
        <!-- 头像 -->
        <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="" />
        <div class="mt-2">
            <input type="file" id="iptFile" accept="image/*" />
        </div>
    </div>
    <script src="./lib/axios.js"></script>
    <script>
        //1. file表单注册change
        document.querySelector('input[type="file"]').addEventListener('change', async function () {
            const fd = new FormData()
            fd.append('avatar', this.files[0])
            const { data: res } = await axios.post('/api/upload/avatar', fd)
            console.log(res);
        })
    </script>
</body>

注意:

  • 1.如果对象中参数有二进制,或者除了文本之外的其他文件,需要用formdata来上传
  • 2.使用formdata的三步骤
    • (1) 实例化formdata对象
    • (2)使用FormData.append()方法把属性名和属性值添加到FormData中
    • (3)直接把FormData对象作为数据作为ajax的传输对象

4.总结

  • URL.createObjectURL()

URL.createObjectURL()  静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

  • 文件上传必须要FormData对象 ： 因为文件数据 和 文本数据 在传输的时候，数据格式不同。需要formdata对象进行自动处理。

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去. -- FormData.append()

  • 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。
avatar
文章
阅读
粉丝