javascript - 通过测试网吧上传文件会导致 Fine Uploader 库出错

Question

在 test cafe 中运行应用程序时上传文件时，出现以下问题和堆栈跟踪:

hammerhead.js:2 [Fine Uploader 5.15.6] Failed to retrieve key name for 0.  Reason: null
window.console.(anonymous function) @ hammerhead.js:2
__stack_frame_overlay_proxy_console__ @ bundle.js:80994
r @ hammerhead.js:9
value @ hammerhead.js:2
./node_modules/fine-uploader/s3.fine-uploader/s3.fine-uploader.core.js.qq.log @ bundle.js:26539
log @ bundle.js:27561
onFailure @ bundle.js:32615
_handleKeynameFunction @ bundle.js:32621
_determineKeyName @ bundle.js:32603
(anonymous) @ bundle.js:26829
promise @ bundle.js:33630
start @ bundle.js:33688
sendNext @ bundle.js:29341
sendNext @ bundle.js:29335
sendNext @ bundle.js:29335
now @ bundle.js:29557
maybeSendDeferredFiles @ bundle.js:29530
maybeDefer @ bundle.js:29512
start @ bundle.js:29565
upload @ bundle.js:29578
_uploadFile @ bundle.js:28602
_onSubmitCallbackSuccess @ bundle.js:28412
(anonymous) @ bundle.js:26829
(anonymous) @ bundle.js:28082
Promise.then (async)
_handleCheckedCallback @ bundle.js:28080
_upload @ bundle.js:28593
(anonymous) @ bundle.js:28489
then @ bundle.js:27079
_onValidateCallbackSuccess @ bundle.js:28488
(anonymous) @ bundle.js:26829
(anonymous) @ bundle.js:28082
Promise.then (async)
_handleCheckedCallback @ bundle.js:28080
_onValidateBatchCallbackSuccess @ bundle.js:28465
(anonymous) @ bundle.js:26829
(anonymous) @ bundle.js:28082
Promise.then (async)
_handleCheckedCallback @ bundle.js:28080
_prepareItemsForUpload @ bundle.js:28501
addFiles @ bundle.js:27429
(anonymous) @ bundle.js:141335
eventChannel @ bundle.js:98272
_callee$ @ bundle.js:141334
tryCatch @ bundle.js:3376
invoke @ bundle.js:3603
(anonymous) @ bundle.js:3424
r @ hammerhead.js:9
value @ hammerhead.js:2
step @ bundle.js:141141
(anonymous) @ bundle.js:141141
Promise.then (async)
step @ bundle.js:141141
(anonymous) @ bundle.js:141141
(anonymous) @ bundle.js:141141
uploadFile @ bundle.js:141362
runCallEffect @ bundle.js:99260
runEffect @ bundle.js:99182
next @ bundle.js:99062
currCb @ bundle.js:99135
takeCb @ bundle.js:99213
put @ bundle.js:98192
(anonymous) @ bundle.js:98280
r @ hammerhead.js:9
value @ hammerhead.js:2
emit @ bundle.js:98145
(anonymous) @ bundle.js:98710
(anonymous) @ bundle.js:140132
continueAllFiles @ bundle.js:140131
onClick @ bundle.js:139876
apply @ bundle.js:44333
baseInvoke @ bundle.js:45997
apply @ bundle.js:44334
(anonymous) @ bundle.js:52088
Button._this.handleClick @ bundle.js:108472
callCallback @ bundle.js:63947
dispatchEvent @ hammerhead.js:3
invokeGuardedCallbackDev @ bundle.js:63986
invokeGuardedCallback @ bundle.js:63843
invokeGuardedCallbackAndCatchFirstError @ bundle.js:63857
executeDispatch @ bundle.js:64241
executeDispatchesInOrder @ bundle.js:64263
executeDispatchesAndRelease @ bundle.js:64361
executeDispatchesAndReleaseTopLevel @ bundle.js:64372
forEachAccumulated @ bundle.js:64340
processEventQueue @ bundle.js:64517
runEventQueueInBatch @ bundle.js:66996
handleTopLevel @ bundle.js:67005
handleTopLevelImpl @ bundle.js:66736
batchedUpdates @ bundle.js:74471
batchedUpdates @ bundle.js:65719
dispatchEvent @ bundle.js:66810
(anonymous) @ hammerhead.js:4

在运行“determineKeyName”时调试堆栈跟踪，keyNameLogic 是一个函数。然后运行此函数并返回未定义。

我相信正在运行的函数是这个:

objectProperties: {
      key(id) {
        return get(awsKeys, id);
      },
    },

这表明“awsKeys”可能未定义。

有人知道是什么原因造成的吗？在 testCafe 测试环境之外执行相同的步骤工作正常(单击上传并从目录中选择一个文件)

我可以看到一个区别，如果在 test Cafe 之外上传会创建一个文件对象，而通过 test Cafe 上传会创建一个“Blob”对象。

Answer 1

目前不知道集成测试方面对此的修复。我认为需要向 testcafe 或 hammerhead 提交错误报告或功能请求，以便在上传前修改文件。

如果您能够修复客户端代码，您可以添加类似这样的内容以在运行时检查文件是否为 Blob，如果是则将其转换为文件。

// if no lastModified set then image was uploaded as a Blob instead of a File
if (!image.lastModified) {
  image = new File([image], image.name);
}

我对 Fine Uploader 库不是很熟悉，但另一种可能的解决方案(也是客户端)可能是使用 URL.createObjectURL(blob) api，但是您要确保调用 URL.revokeObjectURL清理方法。我正在测试 react-avatar-editor它允许图像作为 URL 或文件传递。