使用 formData 上傳文件時輸入錯誤

Question

我在formData.append(key, value);的value部分收到的錯誤消息； ：

'unknown' 類型的參數不能分配給 'string | 類型的參數斑點'。 類型“{}”缺少類型“Blob”的以下屬性：大小、類型、arrayBuffer、切片和另外 2 個。

代碼

const uploadSubtitle = async e => {
            e.preventDefault();
            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({ ...fields, file });
            formArray.forEach(([key, value]) => {
                formData.append(key, value);
            });
           //... further code
    };


<form onSubmit={uploadSubtitle}>
   <input type='file' name='subtitle' ref={fileInput} accept='.srt' />
   <button onClick={uploadSubtitle}>Upload</button>
</form>

額外細節

console.log(file)給出

File 
{name: "Trainspotting-English.srt", lastModified: 1587840529000, 
lastModifiedDate: Sun Apr 26 2020 00:18:49 GMT+0530 (India Standard Time), 
webkitRelativePath: "", size: 103040, …}

lastModified: 1587840529000 lastModifiedDate: Sun Apr 26 2020 00:18:49 GMT+0530 (India Standard Time) 
{} name: "Trainspotting-English.srt" size: 103040 
type: "application/x-subrip" webkitRelativePath: "" __proto__: File

console.log(typeof file)給出object

Answer 1

這一切都歸結為未知類型的res ，在這里介紹：

const res = await Axios.get(`/api/movies/${currentMovie.movieId}/subtitles?user=${user.id}`);

res是any ，這使得fields類型為any ，這反過來又使formArray的類型為[string, unknown][] ，因此value is unknown ，這會導致錯誤。

為了從源頭上解決這個問題，我們可以在Axios.get方法上使用泛型類型，如下所示：

const res = await Axios.get<{url :string, fields: {[key:string]:string}}>(`/api/movies/xxx/subtitles?user=xxx`);

這將使res的類型為{url:string, fields: {[key:string]:string}} 。 這會導致fields的類型為{[key:string]:string} 。

不幸的是，擴展運算符不能推斷出正確的類型。 代碼{...fields, file}解析為類型{file: File} ，這並沒有真正的幫助。 所以讓我們提示formArray ：

const formArray : [string, string|File][] = Object.entries({...fields, file});

現在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>
}

---

對於可以通過將有問題的行更改為：

formData.append(key, value as Blob);

添加as Blob不會更改已編譯的 JS，但會使 typescript 編譯器停止抱怨。