Question

我需要将图片上传到网站，并在图片下方的文件名标题上传后在页面中显示。我已经搜遍过各种各样的内容，并在同一页面上找到了很多关于上传和显示的教程，但我认为我对从服务器请求信息然后再显示回来的内容有所了解。 / p>

我在node +中编写我的Web应用程序并使用express和multer来处理文件IO。这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone-component';
import fs from 'fs';
import express from 'express';
import mutler from 'mutler';

var app = express();
var storage;
var upload;

export default class Form extends React.Component {
constructor (props) {
    super(props);
    storage =  multer.diskStorage({
        //file destination
        destination: function (req, file, callback) {
            callback(null, '/uploads/');
        },
        //set the filename
        filename: function (req, file, callback) {
            callback(null, file.originalname);
            this.state = {
                name: file.originalname
            };
        }
    });
    upload = multer({ storage : storage}).single('userImage');
    app.use('/uploads/', express.static(__dirname + '/uploads/'));
}

handleImageUpload () {
    app.post('/', function (req, res) {
        fs.readFile(req.files.userImage.path, function(err, data) {
            console.log('error with ' + data);
        });
        upload(req, res, function (err) {
            if (err) {
                return res.end("Error uploading file.");
            }

            res.writeFile("/uploads/" + origName, new Buffer(req.body.photo, "base64"), function(err) {
                console.log("error writing image");
            });
            res.redirect('/');
        });
    });
}

getName () {
    return this.state.name;
}

render () {
    return (<div>
        <form action="/" method="post" enctype="multipart/form-data">
            <input type="image" name="userImage"/>
            <input type="submit" name="submit" value="submit" onClick={this.handleImageUpload.bind(this)}/>
        </form>
    </div>

    );
}

}

我尝试过多个教程（这就是导入Dropzone的原因），但我无法理解我想要做的事情。

我想如果我在构造函数中将文件名保存到状态，那么我可以稍后再将其显示在另一个文件中，这只是将文件的URL归结为更高版本的图像源反应文件。

我的问题是：我哪里出错了？根据我的推理，这应该可以工作，但我是一个新的文件IO与节点，并且我已经读过的教程中很多人的常识并不是单击我。提前感谢您的帮助！

Answer 1

使用以下模块选择图像。
https://www.npmjs.com/package/react-image-uploader

然后，您可以使用xhr请求将图像上传到服务器。以下是示例代码。



var xhr  = new XMLHttpRequest();
xhr.onload = function (e) {
//your success code goes here
}
var formData = new FormData();
xhr.open("POST", url, true);
formData.append('file', fileData);
xhr.send(formData);

var xhr = new XMLHttpRequest(); xhr.onload = function (e) { //your success code goes here } var formData = new FormData(); xhr.open("POST", url, true); formData.append('file', fileData); xhr.send(formData);

我假设您正在实施以下要求。

允许用户选择图片。
上传所选图片
向用户显示所选图像。

我的解决方案将有所帮助

允许用户选择图片
向用户显示他/她选择的内容。
通过可用的回调（在教程中提到）将图像上传到服务器
显示成功或失败。

如果您需要任何帮助，请告诉我。：）

上传图像并在页面上显示该图像（Node.js，React，js，Express.js）

1 个答案: