Estoy tratando de subir imágenes desde el front-end para mi servidor PHP. Estoy convertir la imagen en data:image/jpeg;base64el uso FileReader()de JavaScript. Aquí está mi código JS:
fileSelectHandler = (event) => {
let file = event.target.files[0];
console.log(file);
const reader = new FileReader();
reader.onload = () => {
this.setState({
src: reader.result
});
}
reader.readAsDataURL(file);
}
postImage = () => {
var http = new XMLHttpRequest();
var url = 'http://localhost:9090/assign/uploadimage.php';
var params = 'source=' + this.state.src;
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
console.log(http.responseText);
}
}
http.send(params);
}
Insertar el "image / jpeg; base64, ..." completa cadena en mi base de datos MySQL (en el tipo de texto largo).
$conn = new mysqli("localhost","root","","temp_db") or die('connection-error');
if(isset($_POST['source'])){
$data = $_POST['source'];
$stmt = $conn->prepare("insert into f_data values (?)");
$stmt->bind_param("s",$data);
$done = $stmt->execute();
echo "- inserted -";
$stmt->close();
}
Pero cuando traté de mostrar las imágenes después de recuperar las src-enlaces de la base de datos, las imágenes son destruidos o no aparecen en absoluto. Aquí está el código:
$conn = new mysqli("localhost","root","","temp_db");
if(!$conn){
die("connection-error-occured");
}
$stmt = $conn->prepare("select * from f_data");
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows != 0){
while($row = $result->fetch_assoc()){ ?>
<img src = "<?php echo $row['src']; ?>" />
<?php
}
}
¿Cómo debo almacenar y recuperar adecuadamente dicha imagen-datos en PHP?
Finalmente Resuelto! El problema fue que la base64cadena de datos recibida por el servidor PHP faltaba el +símbolo. Los +símbolos fueron sustituidos por white spaces. Incluso el urldecode()de PHP no estaba leyendo el +símbolo correctamente.
Así que mediante la sustitución de aquellos white spacespor +funcionó!
Interfaz:
postImage = () => {
var http = new XMLHttpRequest();
var url = 'http://localhost:9090/assign/uploadimage.php';
var params = 'source=' + encodeURI(this.state.src);
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
console.log(http.responseText);
}
}
http.send(params);
}
Back-end:
<?php
//replacing ' ' with '+'
function full_decode($str){
return str_replace(" ","+",$str);
}
$conn = new mysqli("localhost","root","","temp_db");
if(!$conn){
die("connection-error");
}
if(isset($_POST['source'])){
$data = json_decode($_POST["source"],true);
$data_src = urldecode($data['src']);
$full_src = full_decode($data_src);
$stmt = $conn->prepare("INSERT INTO f_data VALUES (?)");
$stmt->bind_param("s",$full_src);
$stmt->execute();
$stmt->close();
echo "inserted";
}
?>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras