将文件从 react-native (expo) 项目上传到 php 服务器 (laravel)
Upload a file from react-native (expo) project to a php server (laravel)
我已经为这个问题寻找了一个星期的解决方案,尝试了很多东西对我没有用,我正在开发一个基于 expo 的 react-native 项目,我是什么尝试做的是使用 Imagepicker 上传图像,我尝试使用 axios 提交它并获取,我能够发送文本数据,如(用户名,电子邮件......)但不能将文件发送到服务器,它没有'完全不认识它,它给我的只是 [object object],如果有人成功地用 php 做到了,请分享你的代码,我确实用 html 形式尝试了后端并且文件上传没有问题。
解决方案
let picker = await ImagePicker.launchImageLibraryAsync({ base64: true });
const picker = selectedImage.base64;
这将 return 一个 base64 编码的图像数据,您所要做的就是将它作为文本字段发送到 php 服务器,对其进行解码并将其放入这样的文件中:
file_put_contents("example.jpg", base64_decode($_POST['image']));
是的,它正在工作
反应本机
// 保存选取图像的状态变量
const [selectedImage, setSelectedImage] = useState(false);
// 使用图像选择器选择图片
let openImage = async () => {
let permission = await ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted == false) {
return;
}
let picker = await ImagePicker.launchImageLibraryAsync();
setSelectedImage(picker);
}
//上传图片到服务器
const uploadimage = async () => {
const payload = new FormData();
payload.append('image', {
uri: selectedImage.uri,
type: selectedImage.type,
name: selectedImage.fileName
})
const config = {
body: payload,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
}
};
let response = await fetch('http://192.168.1.6/php_upload/upload.php', config);
console.log(response);
}
// PHP 后端
$target_file = "uploads/" . basename($_FILES["image"]["name"]);
if ( move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file) )
{
echo "The file ". basename( $_FILES["photo"]["name"]). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file.";
}
最简单的解决方案是使用 base64 图像格式。
您可以在选项中将 bese64 设置为 true:
let picker = await ImagePicker.launchImageLibraryAsync({ base64:true });
并在经典 json 对象中附加值并避免 multipar/fomr-data,仅用于 php 解码 base64 图像。
我已经为这个问题寻找了一个星期的解决方案,尝试了很多东西对我没有用,我正在开发一个基于 expo 的 react-native 项目,我是什么尝试做的是使用 Imagepicker 上传图像,我尝试使用 axios 提交它并获取,我能够发送文本数据,如(用户名,电子邮件......)但不能将文件发送到服务器,它没有'完全不认识它,它给我的只是 [object object],如果有人成功地用 php 做到了,请分享你的代码,我确实用 html 形式尝试了后端并且文件上传没有问题。
解决方案
let picker = await ImagePicker.launchImageLibraryAsync({ base64: true });
const picker = selectedImage.base64;
这将 return 一个 base64 编码的图像数据,您所要做的就是将它作为文本字段发送到 php 服务器,对其进行解码并将其放入这样的文件中:
file_put_contents("example.jpg", base64_decode($_POST['image']));
是的,它正在工作
反应本机
// 保存选取图像的状态变量
const [selectedImage, setSelectedImage] = useState(false);
// 使用图像选择器选择图片
let openImage = async () => {
let permission = await ImagePicker.requestCameraRollPermissionsAsync();
if (permission.granted == false) {
return;
}
let picker = await ImagePicker.launchImageLibraryAsync();
setSelectedImage(picker);
}
//上传图片到服务器
const uploadimage = async () => {
const payload = new FormData();
payload.append('image', {
uri: selectedImage.uri,
type: selectedImage.type,
name: selectedImage.fileName
})
const config = {
body: payload,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
}
};
let response = await fetch('http://192.168.1.6/php_upload/upload.php', config);
console.log(response);
}
// PHP 后端
$target_file = "uploads/" . basename($_FILES["image"]["name"]);
if ( move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file) )
{
echo "The file ". basename( $_FILES["photo"]["name"]). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file.";
}
最简单的解决方案是使用 base64 图像格式。
您可以在选项中将 bese64 设置为 true:
let picker = await ImagePicker.launchImageLibraryAsync({ base64:true });
并在经典 json 对象中附加值并避免 multipar/fomr-data,仅用于 php 解码 base64 图像。