1

我正在尝试将图像上传到服务器,以便可以将图像保存在服务器上。使用的服务器语言是 PHP。前端站点是 react.js 并选择我正在使用的文件react-dropzone。图像被选中,我在这个函数中处理丢弃的图像。

 onImageDrop(image) {
    let addImage = this.state.images;
    addImage.unshift(image[0]);
    this.setState({images: addImage});
}

然后我在渲染方法中将图像映射到屏幕上。图像确实会出现在屏幕上。

    {this.state.images.map((f, i) =>
    <img key={i} src={f.preview} alt={f.name} style={{
            border: "2px dashed gray",
            margin: "10px",
            width: "200px",
            padding: "5px"
        }}/>
    )}

图像存储在本地 URL 中,我可以在客户端上预览。如果我控制台记录文件,它看起来像这样。

文件{预览:“blob:http://localhost:3000/9b499d57-9248-499c-8974-607143f2ed1d ”,名称:“IMG_20140421_151555.jpg”,lastModified:1398090260000,lastModifiedDate:2014 年 4 月 21 日星期一 15:24:20 GMT +0100(格林威治标准时间夏令时),webkitRelativePath: "", ...}

我想要做的是将文件作为 JSON 格式的 blob 发送到 PHP 脚本,以便我可以将图像保存在服务器上。这是服务器的 fetch 方法。我只是想在一分钟内发送一张图片。

validateandSubmit(){
    fetch(serverScripts + "admin/Controllers/imageController.php", {
        method: 'POST',
        headers: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"},
        body: JSON.stringify({
            action: "ADD_IMAGE",
            name: this.state.images[0].name,
            blob: this.state.images[0].preview
        }),
        mode: 'cors'
    }).then((response) => response.json()).then((data) => {
        console.log(data);
    }).catch((err) => {
        console.error(err);
    });


}

PHP脚本是

<?php

   $_postData = json_decode(file_get_contents("php://input"), true);

   if ($_postData['action'] == "ADD_IMAGE"){
    echo json_encode(['ImageClass' => 'image received', 'success' => true]);

    $theFile = fopen($_postData['name'], "w");
    $fileData = $_postData['blob'];
    fwrite($theFile, $fileData);
    fclose($theFile);

  }

写入服务器的文件是空的。如何发送图像?

我是一名学生,对编程很陌生。如果我离得很远,你能告诉我其他更好的方法吗?

如果您需要任何进一步的信息,请询问我。谢谢

4

0 回答 0