调用Dropbox API get_thumbnail_v2返回乱码 如何在Salesforce LWC展示缩略图

根因说明 #

你看到的黑色菱形乱码不是接口报错，/2/files/get_thumbnail_v2 接口的响应体本身就是二进制的JPEG图片数据流，你用字符串格式读取二进制内容自然会出现乱码，Postman默认用文本模式预览也会显示同样的乱码，Dropbox explorer可以正常展示是因为它自动识别二进制流为图片并渲染。
你从响应头拿到的Dropbox-Api-Result仅包含文件的元数据信息，缩略图的实际内容存在响应体的二进制流中。

实现步骤 #

1. Apex端处理二进制流，转换为可在前端使用的Base64 Data URI #

不要调用res.getBody()读取响应，改用res.getBodyAsBlob()获取二进制内容，再转换为Base64编码，拼接为图片Data URI后返回给LWC：

@AuraEnabled(cacheable=true)
public static String getDropboxThumbnail() {
    try {
        HttpRequest req = new HttpRequest();
        req.setHeader('Authorization', 'Bearer sl.validToken');
        req.setHeader('Dropbox-API-Arg', '{"resource": {".tag": "path","path": "/folderName/pictureName.jpg"},"format": "jpeg","size": "w64h64","mode": "strict"}');
        req.setHeader('Content-Type', 'text/plain; charset=utf-8');
        req.setEndpoint('https://content.dropboxapi.com/2/files/get_thumbnail_v2');
        req.setMethod('POST');
        Http httpreq = new Http();
        HttpResponse res = httpreq.send(req);
        
        if(res.getStatusCode() == 200) {
            // 读取二进制流转Base64，拼接为图片Data URI
            Blob imageBlob = res.getBodyAsBlob();
            String base64Image = EncodingUtil.base64Encode(imageBlob);
            return 'data:image/jpeg;base64,' + base64Image;
        } else {
            throw new AuraHandledException('接口请求失败，状态码：' + res.getStatusCode());
        }
    } catch(Exception e) {
        throw new AuraHandledException(e.getMessage());
    }
}

2. LWC端接收Data URI并渲染图片 #

JS代码示例：

import { LightningElement, wire } from 'lwc';
import getDropboxThumbnail from '@salesforce/apex/你的Apex类名.getDropboxThumbnail';

export default class ThumbnailDemo extends LightningElement {
    thumbnailUrl;
    error;

    @wire(getDropboxThumbnail)
    wiredThumbnail({data, error}) {
        if(data) {
            this.thumbnailUrl = data;
            this.error = undefined;
        } else if(error) {
            this.error = error;
            this.thumbnailUrl = undefined;
        }
    }
}

HTML代码示例：

<template>
    <template if:true={thumbnailUrl}>
        <img src={thumbnailUrl} alt="缩略图" width="64" height="64">
    </template>
    <template if:true={error}>
        <p>加载缩略图失败：{error.body.message}</p>
    </template>
</template>

注意事项 #

• 如果你在请求参数中修改了返回图片的格式为png，需要将Data URI的前缀修改为data:image/png;base64,
• 该方案仅适合小尺寸缩略图场景，你当前请求的w64h64尺寸完全适用，不会超出Salesforce的返回值大小限制
• 确保你的Remote Site Settings中已经添加了https://content.dropboxapi.com域名

内容的提问来源于stack exchange，提问作者Nikolay M.