【HarmonyOS NEXT】webview如何拦截本地文件，例如图片资源

 【关键字】

webview / 拦截 / 本地文件 / 图片 / 沙盒目录

【问题描述】

webview页面要加载一个自定义协议资源，通过onInterceptRequest可以拦截到请求，此资源对应的是沙盒的一个文件，例如一张图片，onInterceptRequest中如何返回这个图片资源，WebResourceResponse里面只有setResponseData(data: string | number)。对比安卓，可以直接设置一个流。webview如何拦截本地图片文件？

【解决方案】

通过onInterceptRequest可以拦截到请求，再从沙箱路径替换图片的demo示例如下。

import web_webview from '@ohos.web.webview';
import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';
import axios from '@ohos/axios'

@Entry
@Component
struct GetFile {

@State message: string = 'Hello World';
// 获取应用文件路径
context = getContext(this) as common.UIAbilityContext;
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
responseweb: WebResourceResponse = new WebResourceResponse()
aboutToAppear() {
// 配置Web开启调试模式
web_webview.WebviewController.setWebDebuggingAccess(true);
}

hasFile(filePath:string){
let b = fs.accessSync(filePath)
return b
}

async getFile(url : string) {
const fileName = url.split("/").pop();
const filePath = this.context.cacheDir + '/'+fileName;

const flag=this.hasFile(filePath);
console.log(flag+"123456")
if(!flag){
await this.downloadImage(url, filePath);
}
let file = await fs.openSync(filePath, fs.OpenMode.READ_ONLY);
let arrayBuffer = new ArrayBuffer(4096);
return file.fd;
}
@Entry
@Component
struct GetFile {

@State message: string = 'Hello World';
// 获取应用文件路径
context = getContext(this) as common.UIAbilityContext;
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
responseweb: WebResourceResponse = new WebResourceResponse()
aboutToAppear() {
// 配置Web开启调试模式
web_webview.WebviewController.setWebDebuggingAccess(true);
}

hasFile(filePath:string){
let b = fs.accessSync(filePath)
return b
}

async downloadImage(url : string, filePath:string) {
try {
await axios({
method: "get",
url,
context: this.context,
filePath: filePath });
} catch (error) {
console.error('[Demo] axios error');
}
}
build() {
Column() {
Web({ src: $rawfile('catch.html'), controller: this.webviewController })
.onInterceptRequest((event) => {
if (event) {
}
const url = event!.request.getRequestUrl();
console.log(url.endsWith(".jpg") + '123456')
if (!url.endsWith(".jpg")) return null;
try {
let url2='https://img.tukuppt.com/photo-big/17/12/16/57/94/171216579483.jpg';
this.getFile(url2).then(fd => {
this.responseweb.setResponseData(fd);
this.responseweb.setResponseCode(200);
this.responseweb.setReasonMessage('OK');
this.responseweb.setResponseIsReady(true);
});
this.responseweb.setResponseMimeType('image/*');
this.responseweb.setResponseIsReady(false);
console.log(this.responseweb.getResponseData().toString+"123456")
return this.responseweb;
} catch (error) {
console.error(`[Demo]Code: ${error.code},Message: ${error.message} `);
return null
}
})
}
}
}