HTTP请求一张图片,转为流返回

简述:

实现用HTTP连接获取一张图片,在servlet中转为流之后输出,这样访问一个service之后就能直接得到图片流并显示出来

类似于访问一个图片的src(html)中会向一个http://localhost:8080/webproj/i.jpg发送请求,于是浏览器就会显示这张图片出来,现在要实现一个后台的service,做的是同样的事情但是请求的却是service,而这个service就返回了图片流回来


代码:

	/**
	 * 获取图片
	 * @param request
	 * @param response
	 */
	public void GetImage(HttpServletRequest request  
			, HttpServletResponse response){
		try {  
            URL url = new URL("http://csdnimg.cn/www/images/csdnindex_logo.gif");  
            HttpURLConnection conn = (HttpURLConnection)url.openConnection();  
            conn.setRequestMethod("GET");  
            conn.setConnectTimeout(5 * 1000);  
            InputStream inStream = conn.getInputStream();//通过输入流获取图片数据  
	        byte data[] = readInputStream(inStream);
	        inStream.read(data);  //读数据   
	        inStream.close();   
	        response.setContentType("image/jpg"); //设置返回的文件类型   
	        OutputStream os = response.getOutputStream();  
	        os.write(data);  
	        os.flush();  
	        os.close(); 
        } catch (Exception e) {  
            e.printStackTrace();  
        } 
	}
	
	
	 public static byte[] readInputStream(InputStream inStream) throws Exception{  
	        ByteArrayOutputStream outStream = new ByteArrayOutputStream();  
	        byte[] buffer = new byte[2048];  
	        int len = 0;  
	        while( (len=inStream.read(buffer)) != -1 ){  
	            outStream.write(buffer, 0, len);  
	        }  
	        inStream.close();  
	        return outStream.toByteArray();  
	 }  
	 
	 
	
	
	/**
	 * 上传首页图片
	 * @param request
	 * @param response
	 */
	public void UploadHomeImage(HttpServletRequest request  
			, HttpServletResponse response){
		//存储文件,同时获取表单中的输入值对
		Map<String, String> nameValuePair = new HashMap<String, String>();
		
		//户型图片存储对象
		HomeImage homeImage = new HomeImage();
		
		//获取存储的地址,同时捕获参数值对
		String imageUrl = saveUploadFile(request,  "/Upload/HomeImage/", nameValuePair);
		
        homeImage.setImageUrl(imageUrl);
		homeImage.setUploadDate(new Date());
		
		settingService.saveOrUpdateHomeImage(homeImage);
		
		//获取信息界面显示类
		HomeImagePage responsePage = settingService.getWebHomePage();
		
		//将页面显示数据类转化为JSON,返回前端
		responseOutWithJson(response, responsePage);
		response.setStatus(HttpServletResponse.SC_OK);
	}





### UniApp 中实现文件图片预览的功能 在 UniApp 中实现文件图片的预览功能,可以通过将服务器返回的文件转为 Base64 编码字符串,并将其作为 `src` 属性绑定到 `<image>` 组件上显示。以下是具体实现方式: #### 1. 后端接口获取文件转为 Base64 通过调用后端 API 获取文件数据,前端可以利用 JavaScript 的 `ArrayBuffer` 和 `btoa()` 方法将二进制数据转换为 Base64 字符串。 ```javascript methods: { async getImageBase64(url) { const res = await uni.request({ url, method: 'GET', responseType: 'arraybuffer' }); if (res.statusCode === 200 && res.data) { const base64String = this.arrayBufferToBase64(res.data); return `data:image/jpeg;base64,${base64String}`; } return ''; }, arrayBufferToBase64(buffer) { let binary = ''; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); }, previewImg(index) { this.getImageBase64(this.image[index]).then(base64 => { if (base64) { uni.previewImage({ current: base64, urls: [base64] }); } }); } } ``` 上述代码中,`getImageBase64` 函数用于请求文件并将结果转化为 Base64 字符串[^1]。随后,在 `previewImg` 方法中调用该函数以动态生成当前图片的 Base64 数据源,并传递给 `uni.previewImage` 进行展示[^2]。 #### 2. 页面结构设计 页面布局可采用简单的循环渲染机制来加载多张图片,点击每一张图片时触发对应的预览逻辑。 ```html <view class="container flex flex-wrap"> <image v-for="(item, index) in image" :key="index" class="image" :src="item" lazy-load="true" @click="previewImg(index)" /> </view> ``` 此处需要注意的是,`@click="previewImg(index)"` 将会把当前图片索引传递至处理函数以便定位目标资源。 --- ### 注意事项 - 如果项目运行环境支持 Blob URL,则可以直接创建一个临时对象链接代替 Base64 转换操作,从而减少内存占用。 - 对于大尺寸图像或者频繁访问场景下建议优化缓存策略避免重复计算开销过大。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值