MERN堆栈二进制图像只是一个黑色方块

Question

我正在使用 MERN 堆栈（mongo db、Express、React 和 Node.js）构建一个全栈应用程序

我目前能够将我的图像作为二进制文件保存到 mongo db。

mongo shell 数据库输出是 "img" : BinData(0,"QzpcZmFrZXBhdGhcc2FtcGxlLnBuZw=="),

所以我会假设上传没问题。

在我正在使用的前端将其转换回图像时

src={`data:image/png;`+btoa(`${Buffer.from(img.data).toString('base64')}`)}

这给了我一个看起来像这样的字符串...... data:image/png;UXpwY1ptRnJaWEJoZEdoY2MyRnRjR3hsTG5CdVp3PT0=

但是，在前端它显示了一个损坏的图像图标，当我转到此链接时它只显示 一个小小的黑色方块。

我尝试了很多连接字符串的组合，但似乎无法显示它。

提前致谢！

Answer 1

好的，所以经过许多不同的策略后，我设法在这里和那里结合了一些代码加上一些即兴创作来构建这个......

ImageUpload.js

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';


class ImageUpload extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            image: {
                name: "",
                img: ""
            },
            submitted: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

handleChange(event) {
        const { name, value } = event.target;
        const { image } = this.state;
        this.setState({
            image: {
                ...image,
                [name]: value,
            }
        });
    }

    onSelectChange = (e) => {
        const values = [...e.target.selectedOptions].map(opt => opt.value);
        this.props.onChange(values);
      };

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state);
        this.setState({ submitted: true });
        const { image } = this.state;
        if (image.name) {
            this.props.register(image);
        }
    }
    _onChange = (e) => {

        const file    = this.refs.uploadImg.files[0]
        const reader  = new FileReader();

        reader.onloadend = () => {
            this.setState({
                image: {
                img: reader.result
                }
            })
        }
        if (file) {
            reader.readAsDataURL(file);
            this.setState({
                image: {
                img: reader.result
                }
            })
        } 
        else {
            this.setState({
                image: {
                img: ""
                }
            })
        }
    }


    render() {
        const { registering } = this.props;
        const { image, submitted } = this.state;
        console.log(this.handleChange);
render() {
        const { registering } = this.props;
        const { image, submitted } = this.state;
        console.log(this.handleChange);
        return (
            <div className="col-md-9 col-md-offset-3">
                <form name="form" onSubmit={this.handleSubmit}>

                    <div className={'form-group' + (submitted && !image.img ? ' has-error' : '')}>
                        <label htmlFor="img">Image</label>
                    <input
                      ref="uploadImg"
                      type="file"
                      name="selectedFile"
                      onChange={this._onChange}>
                    {/* value={toString(window.form.elements[0].nextElementSibling.src)}> */}
                          </input>
                <img src={this.state.image.img} />
                {submitted && !image.img &&
                            <div className="help-block">Image is required</div>
                        }
                    </div>
                    <div className="form-group">
              <button className="btn btn-primary">Register Building</button>
                        {registering &&                         }
                        <Link to="/home" className="btn btn-link">Cancel</Link>
          </div>
     </form>
</div>

mongoose Schema 只是一个简单的字符串：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
Apartment = require('../apartments/apartment.model')

const schema = new Schema(
 name: { type: String },
 img: { type: String }
    }
);


schema.set('toJSON', { virtuals: true });

module.exports = mongoose.model('image', schema);

希望它对其他人有所帮助。此外，如果有人不介意解释为图像上传极长字符串的潜在缺陷（以及对此的任何解决方案），那也将是一个很大的帮助。有没有办法将其作为 Buffer base64 输入并进行转换？ db会这样读吗？

谢谢！