上传文件的几种方式(下)--Blob

最新推荐文章于 2024-05-05 17:04:41 发布

烟雨浥轻尘

最新推荐文章于 2024-05-05 17:04:41 发布

阅读量4.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_41430522/article/details/114377380

版权

这里提一点,base64和blob一般可以用来上传之前的预览

blob到底是个什么,可以直接传给后端吗

files文件列表的文件通过createObjectURL弄出来的是临时blob路径不是blob对象,不要误解,一般用来图片预览

base64通过new Blob弄出来的是真正的blob对象,而blob放入数组或者对象,再放到ajaxdata里,显示的是空,传不过去,如图

还是需要通过FormData,添加键值对放过去

所以说到底想要传blob过去,首先需要FileReader读成base64,然后通过FormData格式化数据,然后传过去

如图

前端代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <img src="./resource/Koala.jpg" id="imga"><br><br><br>
  <input type="file" id="inputa" multiple="multiple"><br><br><br>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
  // 1.获取图片，文件上传，按钮的dom对象
  var imga = document.getElementById('imga');
  var inputa = document.getElementById('inputa');

  // 3.当点击button时，调用ajax上传图片
  // inputa.onchange = function () {
  //   var blob = URL.createObjectURL(this.files[0]);
  //   imga.src = blob;
  //   console.log(blob);
  //   imga.onload = function (e) {
  //     URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象##,最好主动释放,不占内存
  //   }

  // }


  // 把base64转为blob对象
  function dataURItoBlob(base64Data) {
    //console.log(base64Data);//data:image/png;base64,
    var byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(base64Data.split(',')[1]);//base64 解码
    else {
      byteString = unescape(base64Data.split(',')[1]);
    }
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png

    // var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
    // var ia = new Uint8Array(arrayBuffer);//创建视图
    var ia = new Uint8Array(byteString.length);//创建视图
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ia], {
      type: mimeString
    });
    return blob;
  }
  inputa.onchange = function () {
    let blob = URL.createObjectURL(this.files[0])
    console.log(blob)//临时blob路径,不是blob对象,不要误解,一般用来图片预览
    console.dir(blob)

    let reader = new FileReader()
    reader.readAsDataURL(this.files[0])
    reader.onload = function (e) {
      let sr = dataURItoBlob(e.target.result)//转换成的blob对象
      console.log(sr)
      let arr = []
      arr.push(sr)
      let fd = new FormData()
      fd.append('file', sr)
      $.ajax({
        url: "http://localhost/upload",
        type: "POST",
        dataType: "json",
        // data: JSON.stringify(arr),
        data: fd,
        contentType: false,
        processData: false,
        success(res) {
          console.log(res)
        },
        error() {

        }
      })
    }
  }


  // createObjectURL的兼容性处理
  // function getObjectURL(file) {
  //   var url = null
  //   if (window.createObjectURL != undefined) { // basic    
  //     url = window.createObjectURL(file)
  //   } else if (window.URL != undefined) { // mozilla(firefox)    
  //     url = window.URL.createObjectURL(file)
  //   } else if (window.webkitURL != undefined) { // webkit or chrome    
  //     url = window.webkitURL.createObjectURL(file)
  //   }
  //   return url;
  // }



</script>

后端代码

因为也是二进制raw文件,所以也可以通过multiparty处理,存储

关于multiparty 可以看看这篇博客 https://blog.csdn.net/weixin_34249367/article/details/86253509

router.post('/upload', function (req, res) {
    console.log('req', req.body, req.request);
    let form = new multiparty.Form({ uploadDir: './public/img' })
    form.parse(req, function (err, filed, files) {
        console.log('filed', filed)
        console.log('files', files)
        for (const key in files) {
            console.log(key, files[key])
            fs.renameSync(files[key][0].path, `./public/img/${key}`, function (err) {
                console.log('object')
                if (err) {
                    console.log('rename error: ' + err);
                } else {
                    console.log('rename ok');
                }
            });
        }

        // let dataBuffer = new Buffer(filed, 'filed');
        // console.log(dataBuffer)
    })
    res.send({ img: 'imgsrc' })
})

烟雨浥轻尘

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
上传文件的几种方式(下)--Blob

这里提一点,base64和blob一般可以用来上传之前的预览blob到底是个什么,可以直接传给后端吗files文件列表的文件通过createObjectURL弄出来的是临时blob路径不是blob对象,不要误解,一般用来图片预览base64通过newBlob弄出来的是真正的blob对象,而blob放入数组或者对象,再放到ajaxdata里,显示的是空,传不过去,如图还是需要通过FormData,添加键值对放过去所以说到底想要传blob过去,首先需要FileReader读成ba..
复制链接

扫一扫