正确使用Axios在React Native中创建带有Multipart和FormData的方式是什么?

huangapple go评论47阅读模式
英文:

What is the correct way to use Axios Create With Multipart and FormData in React Native

问题

I want to separate the config and the post from axios with react native using multipart upload.

Example:

let param = {file: fileObject.uri, mimeType: fileObject.mimeType, name: fileObject.name, title: text}

ApiConfigAxios.js

export const MultiPartAxios = (formData) => {
    return ApiConfigMultiPartAxios = axios.create({            
        baseURL: website,    
        withCredentials: true,    
        data: formData,
        headers: {
            "Accept": "application/json",           
            'Content-Type': 'multipart/form-data',                        
            "Authorization": `Basic ${base64data}`,        
        },        
    });
}

ApiAxios.js

export const ApiUpload = async (param) => {     
    const formData = new FormData();
    formData.append('data', param);
   
    if (param.case === 1) {        
        const response = await MultiPartAxios(formData).post('/ApiUpload');                                             
        return response.data;     
    }
};

But I got an error:

Object {
  "error": "Request failed with status code 500",
}
undefined

What is the correct way to do it?

英文:

I want to separate the config and the post from axios with react native using multipart upload.

Example :

let param = {file: fileObject.uri, mimeType: fileObject.mimeType, name: fileObject.name, title: text}

ApiConfigAxios.js

export const MultiPartAxios = (formData) => {
    return ApiConfigMultiPartAxios = axios.create({            
        baseURL: website,    
        withCredentials: true,    
        data: formData,
        headers: {
            "Accept": "application/json",           
            'Content-Type': 'multipart/form-data',                        
            "Authorization": `Basic ${base64data}`,        
        },        
    });
}

ApiAxios.js

export const ApiUpload = async (param) => {     
    const formData = new FormData();
    formData.append('data', param);
   
    if (param.case === 1) {        
        const response = await MultiPartAxios(formData).post('/ApiUpload');                                             
        return response.data;     
    }
};

But I got error :

Object {
  "error": "Request failed with status code 500",
}
undefined

What is the correct way to do it ?

答案1

得分: 0

发现解决方案。

正确的做法是这个例子:

ApiConfigAxios.js

export const ApiConfigMultiPartAxios = axios.create({
    baseURL: website,
    withCredentials: true,
    headers: {
        "Accept": "application/json",
        'Content-Type': 'multipart/form-data',
        "Authorization": `Basic ${base64data}`,
    },
});

ApiAxios.js

export const ApiUpload = async (param) => {
    const formData = new FormData();
    formData.append('file', {
        uri: param.file,
        type: param.mimeType,
        name: param.name,
    });

    formData.append('title', param.title);
    formData.append('case', param.case);

    if (param.case === 1) {
        const response = await ApiConfigMultiPartAxios.post('/ApiUpload', formData);
        return response.data;
    }
};
英文:

Found the solution.

The correct way to do it is this example :

ApiConfigAxios.js

export const ApiConfigMultiPartAxios = axios.create({            
    baseURL: website,    
    withCredentials: true,           
    headers: {
        "Accept": "application/json",           
        'Content-Type': 'multipart/form-data',                        
        "Authorization": `Basic ${base64data}`,        
    },        
});

ApiAxios.js

export const ApiUpload = async (param) => {     
    const formData = new FormData();
    formData.append('file', {
        uri: param.file,        
        type: param.mimeType,
        name: param.name,
    });
    
    formData.append('title', param.title);
    formData.append('case', param.case);
        
    
    if (param.case === 1) {        
        const response = await ApiConfigMultiPartAxios.post('/ApiUpload', formData);                 
        return response.data;     
    }
    
};

huangapple
  • 本文由 发表于 2023年5月13日 13:21:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/76241202.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定