如何在filestack-react的PickerOverlay中设置WebP格式上传？

要在上传Filestack时直接将图片转为WebP格式存储，需要在pickerOptions中配置上传转换规则，而非仅依赖URL后缀的动态转换。具体配置方式如下：

修改后的代码 #

import { PickerOverlay } from 'filestack-react';

<PickerOverlay
    apikey={apiKey}
    onUploadDone={(res: any) => {
        if(imageUrl){
            onHandleUnsavedImages(imageUrl)
        }
        onSetImageUrl(res.filesUploaded[0].url)
    }}
    pickerOptions={{
        onClose: () => {
            handleShowPicker()
        },
        accept: ["image/*"],
        // 新增上传转换配置
        uploadConfig: {
            transformations: {
                // 启用上传前转换
                enabled: true,
                // 配置转换规则：转为WebP格式
                tasks: [
                    {
                        convert: {
                            format: 'webp',
                            // 可选：设置质量，平衡体积和清晰度，范围0-100
                            quality: 80
                        }
                    }
                ]
            },
            // 确保转换后的文件被存储到Filestack
            store: {
                location: 's3', // 或你使用的存储位置，默认是Filestack存储
                access: 'public' // 根据需求设置访问权限
            }
        }
    }}
/>

关键说明 #

• uploadConfig.transformations.enabled: 必须设为true，开启上传阶段的图片转换
• convert.format: 'webp': 指定输出格式为WebP
• store配置：确保转换后的文件被持久化存储到Filestack，而非仅生成临时转换链接
• 可选的quality参数：可根据需求调整图片质量，数值越低文件体积越小，但清晰度会相应下降

你之前尝试的transformOptions、convert等参数未生效，是因为没有将它们放在uploadConfig.transformations.tasks这个正确的配置节点下，Filestack的React组件需要严格遵循该层级结构来识别上传时的转换规则。

内容的提问来源于stack exchange，提问作者Rodrigo Mayer