Блог

Я пытаюсь загрузить видеофайлы с Android / iOS, используя библиотеки React Native axios и FormData . Загрузка работает нормально, но когда я head загружаю видеофайлы, все они начинаются с некоторых строк, которых там не должно быть, и поэтому видео не могут быть воспроизведены.

Вот мой код:

 import axios from 'axios';
import FormData from 'form-data';
import { Platform } from 'react-native';

try {
    const url = 'https://...';
    const data = new FormData();
    data.append('video', {
        name: 'myVideo',
        uri: Platform.OS === 'android' ? videoUri : videoUri.replace('file://', ''),
        type: 'video/mov',
    });
    const uploadResponse = await axios.put(url, data, {
        headers: {
            // 'Content-Type': 'multipart/form-data', // tried with and without this
        }
    });
} catch(e) {
    console.log(e);
}
 

Приведенный выше код загружает видео на сервер (фактически через предварительно указанный URL-адрес в S3). Но я не могу воспроизвести видео, потому что они сохраняются с некоторыми дополнительными данными. например, если я запускаю head -c 256 uploadedVideoFile.mov , я получаю что-то вроде этого:

 --dro5DtjS8rCz5979_aCEic78uFOzlZStGqWLS8IlThZeETtfKCHj56npfl03OktoK4oKmf
content-disposition: form-data; name="video"; filename="68DCD13E-524E-437E-AE94-95343C2A9F2B.mov"
content-type: video/quicktime

ftypqt  qt wide=�gmdat�@
�|��]��C�y���>��1<B    grֲ�7���2h"����g���xBd�R(l���e����CI�X�X��x�amp;(–(�
 

Первых 5-6 строк там быть не должно.

Есть идеи, почему это происходит? Я предполагаю, что это связано с FormData тем axios , что я также тестировал его с использованием fetch и получил тот же результат.