JS-图片传输

小沐°

已于 2024-03-12 16:45:27 修改

阅读量144

点赞数 2

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

于 2024-03-12 16:32:44 首次发布

本文链接：https://blog.csdn.net/weixin_46479909/article/details/136656134

版权

JS 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript实现图片上传，包括使用FormData携带文件并发送到服务器，以及通过URL.createObjectURL()转换File或Blob对象为URL，以及利用FileReader读取图片并展示Base64预览。

摘要由CSDN通过智能技术生成

图片上传

一般使用FormData携带文件

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>上传图片</title>
</head>

<body>
  <input type="file" id="fileInput"/>
  <script> 
    document.getElementById('fileInput').addEventListener('change', e=>{
        //使用FormData携带图片文件
        const fd=new FormData()
        fd.append('img',e.target.files[0])
        //提交到服务器，获取图片url网址使用
        axios({
          url:'http://...',
          data:fd
        })
    });
  </script>
</body>

</html>

图片浏览

方法一

用URL.createObjectURL()将一个file或Blob类型的对象转为UTF-16的字符串

objectURL = URL.createObjectURL(Fileobject);

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

方法二

基于FileReader读取图片做预览，得到的图片链接是base64字符串

  const reader = new FileReader()
  reader.readAsDataURL(Fileobject)
  reader.onload = () => {
    console.log('图片base64字符串:',reader.result)
  }

小沐°

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-图片传输

URL.createObjectURL()静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。基于FileReader读取图片做预览，得到的图片链接是base64字符串。用URL.createObjectURL()将一个。一般使用FormData携带文件。
复制链接

扫一扫

专栏目录