【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片
  Ti0viqvZKbnX 2023年11月02日 20 0

一、效果图

【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片_文件流

【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片_文件流_02

二、数据结构

【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片_ide_03

三、完整代码

1、前端代码
<van-image v-for="img in scanImgList" width="1rem" height="1rem" fit="cover" :src="img" @click="showScanImage" />
queryScanImageBlobList(scanImage) {
  const config = {
    headers: { 'Content-Type': "application/json; charset=utf-8" },
    responseType: 'blob'
  };
  let that = this;
  api.post('file/previewImage', scanImage, config).then(res => {
    const dataInfo = res.data;
    let reader = new window.FileReader();
    reader.readAsArrayBuffer(dataInfo);
    reader.onload = function (e) {
      const result = e.target.result;
      const contentType = dataInfo.type;
      // 生成blob图片,需要参数(字节数组, 文件类型)
      const blob = new Blob([result], { type: contentType });
      // 使用Blob创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
      const url = window.URL.createObjectURL(blob);
      that.scanImgList.push(url);
    }
  }).catch(error => {
    console.log(error)
  })
}
2、后端代码
@Override
public ResultVo previewImage(ApproveFileBean scanImg, HttpServletRequest request, HttpServletResponse response) {
  try {
    FileUtil.getFileBlob(scanImg, response);
  } catch (Exception e) {
    throw new BadRequestException(e.getMessage());
  }
  return ResultVo.success("success");
}
/**
  * 通过url获取文件流返回浏览器
 */
public static void getFileBlob(ApproveFileBean file, HttpServletResponse response) throws Exception {
  ZipUtil.setResponse(file.getFileName(), response);
  try {
    OutputStream os = response.getOutputStream();
    InputStream is = FileUtil.getInputStreamByUrl(AuthConstant.FILE_BASE_PATH + file.getFilePath());
    if (is != null) {
      int len;
      byte[] buff = new byte[1024];
      while (-1 != (len = is.read(buff, 0, buff.length))) {
        os.write(buff, 0, len);
      }
      is.close();
      os.close();
    }
  } catch (Exception e) {
    e.printStackTrace();
    throw new BadRequestException("获取文件流异常: " + e.getMessage());
  }
  log.info("<== 获取文件流结束:" + file.getFileName());
}

/**
  * 通过url获取输入流
 */
public static InputStream getInputStreamByUrl(String strUrl) {
  HttpURLConnection conn = null;
  try {
    URL url = new URL(strUrl);
    conn = (HttpURLConnection) url.openConnection();
    conn.setRequestMethod("GET");
    conn.setConnectTimeout(60 * 1000);
    final ByteArrayOutputStream output = new ByteArrayOutputStream();
    IOUtils.copy(conn.getInputStream(), output);
    return new ByteArrayInputStream(output.toByteArray());
  } catch (Exception e) {
    e.printStackTrace();
  } finally {
    try {
      if (conn != null) {
        conn.disconnect();
      }
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
  return null;
}
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
Ti0viqvZKbnX