问题描述
我使用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 });
}
};
这是Json
中rn-fetch-blob
的示例ios
响应:
{ 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' }
有人建议如何处理此问题,感谢您的关注
解决方法
尝试使用:
data:RNFetchBlob.wrap(realPath)
代替:
data:RNFetchBlob.wrap(decodeURIComponent(realPath))
您的其余代码看起来不错。无论如何,您正在替换 iOS 所需的 fp.replace('file://','')
。
这是我在代码中的做法:
data:RNFetchBlob.wrap(this.state.file.uri.replace("file://",""))