关于后端返回文件流前端的处理

38 阅读1分钟

前端将文件流转BLOB的处理

 imageId2Url : (id) => {
    return new Promise((resolve, reject) => {
      if (id) {
      //请求图片的api
        Axios.get(xxxxx+ id, {
          responseType:'blob',//以blob请求
          headers         : {
          }
        }).then((res) =>{
        //生成blob对象
        const myBlob = new window.Blob([res.data], { type: "image/jpeg" });
        let img = window.URL.createObjectURL(myBlob);
        //返回
        resolve(img) 
      },(err) => {
         resolve('/images/no-img.png')
      }).catch((err) => {
        reject(err)
      })
      } 
      else {
        resolve('/images/no-img.png')
      }
    })
  },

前端将文件流转base64的处理

  imageId2Base64 : (id) => {
    return new Promise((resolve, reject) => {
      if (id) {
      //请求图片的api
        Axios.get(xxxxx+ id, {
          responseType:'blob',//blob形式请求
          headers         : {
          }
        }).then((res) =>{
        //生成blob对象
        const blob = new window.Blob([res.data], { type: "image/jpeg" });
        //将blob转换为base64
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => {
          const base64 = reader.result;
          resolve(base64);
        }
      },(err) => {
         resolve('/images/no-img.png')
      }).catch((err) => {
        reject(err)
      })
      } 
      else {
        resolve('/images/no-img.png')
      }
    })
  },