使用axios和redux saga发送formData错误

Question

我正试图从一个react-native应用程序发送一些多部分表单数据到后端，目的是更新个人资料照片。

我的传奇电话是…

// react native code
export function* uploadFile({ payload }) {
const { uri } = payload.data;
try {
const data = new FormData();
data.append('file', uri);
const headers = { 'Content-Type': 'multipart/form-data' };
const response = yield call(api.post, '/upload', data, headers);
yield put(fileUploadSuccess(response.data));
} catch (error) {
yield put(fileUploadFailure());
}
}

上面的代码到达后端(下面)，但是文件数据来自请求的主体(req.body.file)，而不是请求本身(req.file)。

在邮差请求中，它工作正常。

我做错了什么?

// backend code
ImgUpload.uploadToGcs = (req, res, next) => {
if (!req.file) return next();
// omitted code

Answer 1

Postman自动检测表单数据和多部分边界。在浏览器请求的情况下，我们需要允许浏览器自动检测Content-Type并设置边界。

从头文件中删除硬编码的'Content-Type': 'multipart/form-data'，并用'contentType': false替换它。以下请求应按预期工作。

export function* uploadFile({ payload }) {
const { uri } = payload.data;
try {
const data = new FormData();
data.append('file', uri);
const headers = { 'contentType': false }; // allow browser to detect content-type
const response = yield call(api.post, '/upload', data, headers);
yield put(fileUploadSuccess(response.data));
} catch (error) {
yield put(fileUploadFailure());
}
}