Javascript 使用formData上载文件时出现类型错误
我在Javascript 使用formData上载文件时出现类型错误,javascript,typescript,multipartform-data,form-data,Javascript,Typescript,Multipartform Data,Form Data,我在formData.append(key,value)的value部分收到的错误消息: 类型为“unknown”的参数不可分配给类型为的参数 “串|滴”。类型“{}”在中缺少以下属性 类型“Blob”:大小、类型、arrayBuffer、切片和2个以上 代码 const uploadSubtitle=async e=>{ e、 预防默认值(); const file=fileInput.current.files[0]; const res=await Axios.get(`/api/movi
formData.append(key,value)的value
部分收到的错误消息代码>:
类型为“unknown”的参数不可分配给类型为的参数
“串|滴”。类型“{}”在中缺少以下属性
类型“Blob”:大小、类型、arrayBuffer、切片和2个以上
代码
const uploadSubtitle=async e=>{
e、 预防默认值();
const file=fileInput.current.files[0];
const res=await Axios.get(`/api/movies/${currentMovie.movieId}/subtitles?user=${user.id}`);
const{url,fields}=res.data;
const newUrl=`https://${url.split('/')[3]}.s3.amazonaws.com`;
const formData=new formData();
const formArray=Object.entries({…字段,文件});
formArray.forEach(([key,value])=>{
formData.append(键、值);
});
//…进一步代码
};
上传
其他细节
console.log(文件)
文件
{名称:“Trainspotting English.srt”,最后修改:1587840529000,
最后修改日期:太阳2020年4月26日00:18:49 GMT+0530(印度标准时间),
webkitRelativePath:,大小:103040,…}
lastModified:1587840529000 lastModifiedDate:Sun Apr 26 2020 00:18:49 GMT+0530(印度标准时间)
{}名称:“Trainspotting English.srt”大小:103040
类型:“应用程序/x-subrip”webkitRelativePath:“”原始文件
console.log(文件类型)
对象
这一切归结为未知类型的res
,这里介绍:
const res = await Axios.get(`/api/movies/${currentMovie.movieId}/subtitles?user=${user.id}`);
res
是any
,这使得字段成为类型any
,而formArray
又成为[string,unknown][
类型,因此值是未知的导致错误
要从源头上解决此问题,我们可以在Axios.get
方法上使用泛型类型,如下所示:
const res = await Axios.get<{url :string, fields: {[key:string]:string}}>(`/api/movies/xxx/subtitles?user=xxx`);
现在value
将是string | File
类型
完整示例:
function App() {
let fileInput = useRef<HTMLInputElement>(null);
const uploadSubtitle = async (e: React.FormEvent) => {
e.preventDefault();
const file = fileInput.current!.files![0];
const res = await Axios.get<{ url: string, fields: { [key: string]: string } }>(`/api/movies/xxx/subtitles?user=xxx`);
const {url, fields} = res.data;
const formData = new FormData();
const formArray: [string, string | File][] = Object.entries({...fields, file});
formArray.forEach(([key, value]) => {
formData.append(key, value);
});
};
return <form onSubmit={uploadSubtitle}>
<input type='file' name='subtitle' ref={fileInput} accept='.srt'/>
<button type="submit">Upload</button>
</form>
}
将添加为Blob
不会更改已编译的JS,但会使typescript编译器停止抱怨。您是否尝试过在其上强制转换文件,或调用新Blob
?@ZacAnger,我尝试过这个const-blob=new-blob([fileInput.current.files[0]])
然后这个const-formArray=Object.entries({…字段,文件:blob})代码>,仍然给了我同样的错误我想补充的一件事是我能够在开发过程中成功上传文件…这只是导致问题的typescript错误是的,错误来自typescript,所以你只需要找出正确的方法来欺骗它,使其快乐。一个/@ts ignore
注释可以工作,但最好弄清楚它想要什么。断言value
是any
也会起作用:formData.append(key,value as any)
,或者const file=fileInput.current.files[0]作为Blob
可能起作用。前者起作用,即不抱怨类型错误,但后者不起作用。我仍然想知道console.log(file)
应该已经是Blob,因为\uuuu proto\uuuuu
是文件的文件。
function App() {
let fileInput = useRef<HTMLInputElement>(null);
const uploadSubtitle = async (e: React.FormEvent) => {
e.preventDefault();
const file = fileInput.current!.files![0];
const res = await Axios.get<{ url: string, fields: { [key: string]: string } }>(`/api/movies/xxx/subtitles?user=xxx`);
const {url, fields} = res.data;
const formData = new FormData();
const formArray: [string, string | File][] = Object.entries({...fields, file});
formArray.forEach(([key, value]) => {
formData.append(key, value);
});
};
return <form onSubmit={uploadSubtitle}>
<input type='file' name='subtitle' ref={fileInput} accept='.srt'/>
<button type="submit">Upload</button>
</form>
}
formData.append(key, value as Blob);