记一次测试文件上传功能踩坑

最新推荐文章于 2024-07-28 00:44:17 发布

weixin_34273046

最新推荐文章于 2024-07-28 00:44:17 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 操作系统 ViewUI

原文链接：https://juejin.im/post/5cb3f585f265da0382610b1c

本文记录了在开发Vue uploader组件时遇到的测试难题：如何触发input file的change事件。作者通过Google搜索，发现了解决方案，即使用dataTransfer属性和手动创建事件对象模拟触发。然而，在实际测试环境中，该方法未能正常工作。经过进一步Google搜索，最终找到了构造事件对象模拟触发change事件的方法，成功解决问题，强调了Google和英语技能在解决问题中的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写Vue uploader组件

轮子链接,目前样式还比较粗糙;

基本功能完成后，开始着手写测试

于是卡在了 input file 触发 change的问题

有问题就google吧! 放弃百度吧！

具体思路如下

如何往input里设置文件呢？

let input = inputWrapper.element;
let file1 = new File(['xxx'],'xxx.txt');
let file2 = new File(['yyy'],'yyy.txt');
input.files[0] = file1;
input.files[1] = file2;


报错
TypeError: Failed to set an indexed property on 'FileList': Index property setter is not supported.
    at Context.eval (webpack-internal:///./tests/unit/uploader.spec.js:53:20)

意思不能这样给 input 设置文件

那就尝试把 input 的文件变成数组

input.files = [file1,file2];

结果又报错了

TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.