js上传二进制图片

56 阅读 0 评论 37 点赞

我是靠谱客的博主清爽小猫咪，最近开发中收集的这篇文章主要介绍js上传二进制图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：因为公司图片上传接口和手机客户端上传接口用的是同一个，所以前端要和手机端一样使用二进制的方式进行图片上传。在进行二进制图片上传的时候遇到了几个坑：
第一个是如果后台定义的请求类型是contentType:application/octet-stream的二进制类型就不能用jquery封装的ajax进行请求，否则会报错，建议用原生ajax请求。
第二个是你需要用法哦两个H5的方法readAsArrayBuffer和Blob，前者是将文件读取并缓存至二进制的缓存区后者是将文件读取并存放至Blob对象中且必须以数组的形式。
代码：

$('body').on('change', '#uploadImg', function () {//上传图片
    let file = this.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);//安字节读取文件并存储至二进制缓存区
    reader.onload = function (e) {
      let result = e.target.result;
      // let blob = new Blob([result]);//存储二进制数据
      // let url = URL.createObjectURL(blob);//生成本地图片地址用于图片预览
      let request = new XMLHttpRequest();
      request.onreadystatechange = function () {
        if (request.readyState === 4) {
          if (request.status === 200) {
            parent.modal.operModal({
              info: '成功',
              className: 'H5Product'
            })
            $('.imgWrap').attr('data-url', address);
            $('.imgWrap').html(`<img src="${address}">`);
          } else {
            parent.modal.operModal({
              info: '失败',
              className: 'H5Product'
            })
          }
        } else {
          console.log('others')
        }
      }
      request.open('PUT', host);//host是阿里云返回的图片存储地址，即你要请求的地址
      request.setRequestHeader('Content-Type', 'application/octet-stream');
      request.send(result);
    }
  })

另外，这是我的微信：ChenYuJ，前端新人一枚，希望有些共同前进的朋友。