HarmonyOS 鸿蒙Next js开发 求如何将图片进行base64位编码

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next js开发 求如何将图片进行base64位编码 救命，我在网上找的方法都和鸿蒙js不兼容，然后我想调用fs库进行编码发现鸿蒙也用不了！救命，孩子明天晚上就要交项目了，就差图片编码上传了。

有没有伙伴知道js开发如何通过uri将图片进行base64编码吗，求助！！！

11 回复

dataability的uri必须DataAbilityHelper才可以访问，还要动态申请READ_MEDIA权限

config.json中添加相应权限

ability中动态申请

更多关于HarmonyOS 鸿蒙Next js开发 求如何将图片进行base64位编码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


太感谢了，起床后能够看见这么详细的代码还是很感动的。我刚刚按照代码成功进行了base64编码，我本来想将这个传回来在js里面发送http请求，但是传回来的时候出现问题(可能是因为字符串过长？)，所以我打算跟代码一样在java端进行http请求，但是上面的代码好像还缺一个工具类HttpUtil，如果方便的话可以把那个工具类发出来参考一下吗，谢谢！，

public static final String BASE_URI = “https://…”;
public static final String PATH_KEY = “path”;
public static final String REQUEST_METHOD_KEY = “requestMethod”;
public static final String BODY = “body”;
public static final String GET = “GET”;
public static final String POST = “POST”;
public static final String PUT = “PUT”;

public static void httpPost(ZSONObject zsonObject) {
zsonObject.put(REQUEST_METHOD_KEY, POST);
httpRequest(zsonObject);
}

public static void httpRequest(ZSONObject zsonObject) {
new Thread(() -> {
InputStream stream;
HttpURLConnection conn = null;
String data = null;
try {
URL url = new URL(BASE_URI + zsonObject.getString(PATH_KEY));
conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod(zsonObject.getString(REQUEST_METHOD_KEY));
String body = zsonObject.getString(BODY);
conn.setReadTimeout(10000);
conn.addRequestProperty(“Content-Type”, “application/json”);
conn.addRequestProperty(“Accept-language”, “zh-CN”);
conn.addRequestProperty(“language”, “zh-CN”);
conn.addRequestProperty(“os”, “android”);
conn.addRequestProperty(“unique”, String.valueOf(System.currentTimeMillis()));

        Context context = JSInterface.getContext().getApplicationContext();             
        DatabaseHelper databaseHelper = new DatabaseHelper(context); // context入参类型为ohos.app.Context。             
        String fileName = "userData"; // fileName表示文件名，其取值不能为空，也不能包含路径，默认存储目录可以通过context.getPreferencesDir()获取。             

        String userId = preferences.getString("userId", "");             
        String subsiteId = preferences.getString("subsiteId", "");             
        String userSession = preferences.getString("userSession", "");              

        conn.addRequestProperty("userId", userId);             
        conn.addRequestProperty("subsiteId", subsiteId);             
        conn.addRequestProperty("userSession", userSession);              

        conn.setDoOutput(true);             
        conn.setDoInput(true);             
        conn.setUseCaches(false);             
        conn.connect();             
        OutputStream out = conn.getOutputStream();             
        out.write(body.getBytes());             
        out.flush();             
        out.close();             
        int responseCode = conn.getResponseCode();             
        if (responseCode == 200 || responseCode == 201) {                 
            stream = conn.getInputStream();             
        } else {                 
            stream = conn.getErrorStream();             
        }             
        data = readInputStreams(stream);             
        RequestData requestData = new RequestData();             
        requestData.setCode(responseCode);             
        requestData.setData(data);             
        JSInterface.getCallback().reply(requestData);         
    } catch (Exception ignored) {             
        JSInterface.getCallback().reply(ignored.toString());             
        LogUtil.info("WRYCHH", "ignored " + ignored.toString());         
    } finally {             
        assert conn != null;             
        conn.disconnect();         
    }     
}).start();

}

我试了下回传js也是正常的，image组件可以直接显示

data = Base64.getEncoder().encodeToString(bytes);
JSInterface.getCallback().reply("data:image/png;base64," + data);

博主您好，请问怎么把图库中的图片读取并保存到软件中啊，期望下次打开应用不会丢失？

如图，上面的是我的图片路径(从图库里面调出来了的)，下面就是URI的报错…

请您参考下4楼大佬的操作，如有疑问可随时跟帖，感谢。

可以和Java通信转为base64然后再传回js…

刚刚进行了fa调用pa到java端进行编码，由于我是保存到图库的，所以我的uri是带dataability:///........的，但是URI对象进行读取的时候报错：unknown protocol: dataability。我不知道大家有没有遇到过这种情况，我不知道应该怎么改，或者说URI本身就不支持鸿蒙图库的这个路径… 调到了3点多钟，人麻了。

欢迎开发小伙伴们进来帮帮楼主

在HarmonyOS（鸿蒙）系统中进行Next.js开发时，将图片进行Base64位编码的过程与在标准Web开发环境中基本相同。以下是如何在Next.js中实现这一功能的简要步骤：

  1. 读取图片文件：首先，你需要获取图片文件。在Next.js中，这通常通过文件上传组件或直接从静态资源中读取来完成。

  2. 转换为Base64编码：使用JavaScript的FileReader API或Node.js的fs模块（如果是服务器端渲染或API路由）来读取文件内容，并将其转换为Base64编码。

    示例代码（客户端）：

    const handleFileChange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
        const base64String = reader.result.split(',')[1];
        console.log(base64String); // 这是图片的Base64编码
    };
    reader.readAsDataURL(file);
};

    在服务器端（如API路由），你可以使用fs模块读取文件并使用Buffer进行编码：

    import fs from 'fs';
const base64String = fs.readFileSync('path/to/image.jpg').toString('base64');

  3. 使用Base64编码：现在你可以将Base64编码的字符串用于你的Next.js应用中的任何需要图片数据的地方，比如作为img标签的src属性。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部