上传图像时出现问题，在"IOS"中使用"rn-fetch-blob"

Question

我使用rn-fetch-blob上传图像。这在Android中正常工作，但在iOS中不起作用。我使用data参数来创建图像链接，当我检查iOS的响应时，我发现data在iOS响应中为空。我不知道为什么status为200时data参数为空。

我尝试了所有相同问题的答案，但它们对我不起作用！

上传图像的代码：

export const UploadImageService2 = async (
file: any,
): AxiosRequestConfig => {
console.log("UploadImageService2");
console.log("file: " + file);
let seps = `${file.path}`.split('/');
let filename = seps[seps.length - 1];
var fp = file.path + "";
const realPath = Platform.OS === 'ios' ? fp.replace('file://', '') : fp;
console.log("fb: " + fp);
console.log("filePath: " + realPath);
const data = [
{
name: 'Files',
filename,
type: file.mime,
// binary field data from a file path, use `wrap` method to wrap the path
data: RNFetchBlob.wrap(decodeURIComponent(realPath)),
// binary field data encoded in BASE64
// data: RNFetchBlob.base64.encode(file),
},
];
console.log("dataObj: " + JSON.stringify(data));
const response = await RNFetchBlob.fetch(
'POST',
`${BaseUrl}api/image`,
{
Authorization: 'Bearer ',
'Content-Type': 'multipart/form-data',
},
data,
);
return {
...(response ? response : {}),
...file,
};
};

这就是这个调用的函数：

_uploadSingleImage = async (file: any, sendCheckupForm) => {
console.log("_uploadSingleImage");
console.log("_file: " + JSON.stringify(file));
let response = await UploadImageService2(file);
// let response = await UploadImageService(file);
console.log('resp=>>>', response)
if (get(response, ['respInfo', 'status']) === 200) {
console.log("okkk");
const responseData = get(response, ['data'], file.name);
console.log("responseData: " + JSON.stringify(responseData));
const fileUrl = responseData.replace(/^"(.+(?="$))"$/, '$1');
// const fileUrl = 'myTestImage';
const attachedFiles = this.state.attachedFiles.map(i => i.path === response.path ? { ...i, status: 'success', FileName: fileUrl } : i);
console.log("attachedFiles: " + JSON.stringify(attachedFiles));
this.setState({ attachedFiles });
console.log('fileUrl', fileUrl)
this.setState({ receptionImage: fileUrl });
if (sendCheckupForm) {
// this.setState({showCheckupForm: false});
this.props.sendCheckupForms(
this.props.token,
this.props.orderDetails.Id,
{
fileList: [fileUrl],
},
);
this.props.getOrder(this.props.token, this.props.orderId);
}
} else {
console.log("Erorrr");
const attachedFiles = this.state.attachedFiles.map(i => i.path === response.path ? { ...i, status: 'error' } : i);
this.setState({ attachedFiles });
}
};

这是iOS中rn-fetch-blob的Json响应示例：

{ taskId: 'jgd8phv6w98zryggebvvkg',
type: 'utf8',
respInfo: 
{ redirects: [ 'https://cp.azmayeshonline.com/api/image' ],
status: 200,
timeout: false,
taskId: 'jgd8phv6w98zryggebvvkg',
headers: 
{ 'x-aspnet-version': '4.0.30319',
'Content-Length': '42',
'x-frame-options': 'AllowAll',
Date: 'Tue, 27 Oct 2020 19:34:43 GMT',
Expires: '-1',
Server: 'Microsoft-IIS/10.0',
'Content-Type': 'application/json; charset=utf-8',
'Cache-Control': 'no-cache',
'x-powered-by': 'ASP.NET',
Pragma: 'no-cache' },
respType: 'json',
state: '2',
rnfbEncode: 'utf8' },
info: [Function],
array: [Function],
blob: [Function],
text: [Function],
json: [Function],
base64: [Function],
flush: [Function],
session: [Function],
readStream: [Function],
readFile: [Function],
exif: null,
filename: 'IMG_0002.JPG',
path: '/Users/mesimac/Library/Developer/CoreSimulator/Devices/52589261-2055-4237-9DED-E4F8D71FD25B/data/Containers/Data/Application/5FC9EEDF-5710-4935-9380-F03114B291CF/tmp/react-native-image-crop-picker/7EF8432F-53A3-4A41-8068-159A5990623C.jpg',
height: 1024,
width: 1541,
data: null,
modificationDate: '1441224147',
localIdentifier: 'B84E8479-475C-4727-A4A4-B77AA9980897/L0/001',
size: 304799,
sourceURL: null,
mime: 'image/jpeg',
cropRect: null,
creationDate: '1255122560',
status: 'loading' }

有人建议我如何处理这件事吗？

Answer 1

尝试使用：

data:RNFetchBlob.wrap(realPath)

而不是：

data:RNFetchBlob.wrap(decodeURIComponent(realPath))

代码的其余部分看起来不错。无论如何，您正在更换iOS所需的fp.replace('file://', '')。

这就是我在代码中的做法：

data:RNFetchBlob.wrap(this.state.file.uri.replace("file://", ""))