如何上传图片到服务器(REACT NATIVE apisauce)

Question

成功发布新广告，但图像上传不起作用

import client from "./client";
import {API_KEY} from "./constant";


const addListing = (postData,locationId,img) => 
client.post(`api.php?key=${API_KEY}&type=insert&object=item&action=add&catId=${postData.category}&contactName=&contactPhone=${postData.mobile}&sPhone=${postData.mobile}&showPhone=1&contactEmail=${postData.mobile}@kippee.com&price=${postData.price}&countryId=in&regionId=&cityId=${locationId}&title[en_US]=${postData.title}&description[en_US]=${postData.description}&photos=[${imgUrl}]`);

如何转换为formdata

Answer 1

经过反复试验，我找到了这个从react原生应用程序上传图片到s3的解决方案，你应该能够添加任何你需要的数据作为url参数。

let xhr = new XMLHttpRequest();
xhr.open('PUT', media.putURL); // where you want to put the image

xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
        let percentComplete = (event.loaded / event.total) * 100;
    }
});
xhr.upload.addEventListener('error', () => { 
    // error
});

xhr.onload = ()  => {
    console.log('onload', xhr.status);
    // finished
};

xhr.onreadystatechange = () => {
    console.log('xhr.status ', xhr.status);
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
        // success
        } else {
        // upload error
        }
    }
}

xhr.setRequestHeader('Content-Type', 'image/jpg');

if(Platform.OS === 'android'){
    xhr.send({uri: media.uri, type: 'image/jpg', name: media.name}); 
} else {
    RNFetchBlob.fs.readFile(media.uri, 'base64', 4095).then((data) => {
        let url = "data:image/jpg;base64,"+data

        fetch(url).then(res => res.blob()).then((blob) => {
            xhr.send(blob);
        })
    }).catch((error) => {
        console.log('Error reading file: ', error);
    })
}

如果需要使用rn- iOS - blob包来获取base64编码的图像数据，则使用fetch api从base64编码的字符串中获取blob数据，然后将其传递给xhr发送函数。

可能有一种更好的方法来获取iOS图像数据，但是当我在今年早些时候写这篇文章时，这三个步骤是我可以上传iOS图像的唯一方法。