Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/446.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用formData上载文件时出现类型错误_Javascript_Typescript_Multipartform Data_Form Data - Fatal编程技术网

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);