• 微信小程序显示流格式照片


    1.服务端,java代码,用于将图片转为文件流返回给前端

    1. import java.nio.file.Files;
    2. import java.nio.file.Path;
    3. import java.nio.file.Paths;
    4. import org.springframework.core.io.Resource;
    5. import org.springframework.core.io.UrlResource;
    6. import org.springframework.http.HttpHeaders;
    7. import org.springframework.http.MediaType;
    8. import org.springframework.http.ResponseEntity;
    9. import org.springframework.web.bind.annotation.GetMapping;
    10. import org.springframework.web.bind.annotation.RestController;
    11. @RestController
    12. public class Demo {
    13. @GetMapping("/aaaaaa")
    14. public ResponseEntity getImage(String imageName) throws Exception {
    15. // 构建图片的路径
    16. Path imagePath = Paths.get("D:\\1.png");
    17. // 检查文件是否存在
    18. if (!Files.exists(imagePath)) {
    19. throw new Exception("Image not found");
    20. }
    21. // 将图片文件转换为Resource对象,以便Spring管理
    22. Resource resource = new UrlResource(imagePath.toUri());
    23. // 设置响应头,指定内容类型和文件名(对于下载特别有用)
    24. HttpHeaders headers = new HttpHeaders();
    25. headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + imageName);
    26. headers.add(HttpHeaders.CONTENT_TYPE, MediaType.IMAGE_PNG_VALUE); // 根据实际情况调整MIME类型
    27. // 返回文件流和响应头
    28. return ResponseEntity.ok()
    29. .headers(headers)
    30. .body(resource);
    31. }
    32. }

    2.微信小程序端,请求文件流,并将图片转码

    1. getImage(){
    2. const that = this
    3. uni.request({
    4. url:"http://127.0.0.1/aaaaaa",
    5. method: 'GET',
    6. dataType:'json',
    7. responseType: 'arraybuffer', // 指定返回类型为二进制数据流
    8. data: {},
    9. success:(res)=>{
    10. // 将返回的文件流数据写入临时文件
    11. const fsm = wx.getFileSystemManager();
    12. const filePath = wx.env.USER_DATA_PATH + '/temp-image.jpg';
    13. fsm.writeFile({
    14. filePath: filePath,
    15. data: res.data,
    16. encoding: 'binary',
    17. success() {
    18. // 将临时文件路径绑定到页面上的image组件
    19. that.imgSrc=filePath;
    20. }
    21. });
    22. },
    23. })
    24. }

  • 相关阅读:
    小胶质细胞仅仅是神经系统内的“配角”?
    Mongo 服务器上的 CPU 使用率很高,但 Mongo 似乎处于空闲状态
    MAX3072EESA+T RS-485/RS-422半双工收发器
    vue3-vant4-vite-pinia-axios-less学习日记
    关于高并发,我想聊一聊。
    渲染时间过长?这些参数设置学起来
    USART串口协议
    # 开发安全
    JS赋值运算符详解
    React ISR 如何实现 - 最后的 Demo
  • 原文地址:https://blog.csdn.net/shiqiangwen/article/details/139283319