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

-和自己对话-2024-05-31 23:52

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

java 复制代码

import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class Demo {

    @GetMapping("/aaaaaa")
    public ResponseEntity<Resource> getImage(String imageName) throws Exception {
        // 构建图片的路径
        Path imagePath = Paths.get("D:\\1.png");
        
        // 检查文件是否存在
        if (!Files.exists(imagePath)) {
            throw new Exception("Image not found");
        }
        
        // 将图片文件转换为Resource对象，以便Spring管理
        Resource resource = new UrlResource(imagePath.toUri());
        
        // 设置响应头，指定内容类型和文件名（对于下载特别有用）
        HttpHeaders headers = new HttpHeaders();
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + imageName);
        headers.add(HttpHeaders.CONTENT_TYPE, MediaType.IMAGE_PNG_VALUE); // 根据实际情况调整MIME类型
        
        // 返回文件流和响应头
        return ResponseEntity.ok()
                .headers(headers)
                .body(resource);
    }
}

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

javascript 复制代码

getImage(){
	const that = this
	uni.request({
		url:"http://127.0.0.1/aaaaaa",
		method: 'GET',
		dataType:'json',
		responseType: 'arraybuffer', // 指定返回类型为二进制数据流
		data: {},
		success:(res)=>{
			// 将返回的文件流数据写入临时文件
			const fsm = wx.getFileSystemManager();
			const filePath = wx.env.USER_DATA_PATH + '/temp-image.jpg';
			fsm.writeFile({
			  filePath: filePath,
			  data: res.data,
			  encoding: 'binary',
			  success() {
				// 将临时文件路径绑定到页面上的image组件
				that.imgSrc=filePath;
			  }
			});
		},
		
	})
}