Question

使用 reactjs 和 mongodb 上传图片

2019-08-27

350

reactjs mongodb forms mongoose

我正在尝试使用 reactjs 中的表单制作一个图像上传器。我在 mongodb 中创建了一个 api（感谢 express、mongoose 等），我正在尝试使用它来上传图像。

实际上，我想将图像文件发送到云端（使用 Cloudinary），并获取 url。

这是我的表单和方法 ：

class Header extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            data: [],
            uploading: false,
            image: [],
            apiKey: 'xxx'
        };
    }
    onChangeImage = e => {
        this.setState({[e.target.name]: Array.from(e.target.files)});
    };

   sendImage = files => {
        const formData = new FormData();
        files.forEach((file, i) => {
            formData.append(i, file)
        });
        fetch('http://localhost:3000/image-upload', {
            method: 'POST',
            headers : new Headers({
                'Content-Type' : 'application/x-www-form-urlencoded',
                'x-access-token' : this.state.apiKey
            }),
            body: formData
        })
            .then(res => res.json())
            .then(image => {
                this.setState({
                    uploading: false,
                    image
                });
                return true;
            });
        return false;
    };

handleSubmit = (event) => {
 event.preventDefault();
 const { image } = this.state;
 this.sendImage(image);
};

render() {
   return(

      <form onSubmit={this.handleSubmit} className="formAdd">
      <input type='file' id="image" name="image" onChange={this.onChangeImage} />
      <button className="contact-form-btn">
         Send<i className="fa fa-long-arrow-right" aria-hidden="true"></i>
      </button>
      </form>
   )
}

关于我的 API 控制器：

const cloudinary = require('cloudinary');
module.exports = {
    create: function(req, res) {
        cloudinary.config({
            cloud_name: 'xxxx',
            api_key: 'xxxxx',
            api_secret: 'xxxxx'
        });
        const path = Object.values(Object.values(req.body.files)[0])[0].path;
        cloudinary.uploader.upload(path)
            .then(image => res.json([image]));
    },
};

我得到的错误代码是 500“TypeError：无法将未定义或 null 转换为对象”。确实，它找不到 Object.values(Object.values(req.body.files)[0])[0].path 。我错过了什么？ 謝謝。

Answer 1

您可以使用它来上传图像。使用 async/await 。

async uploadImage(image) {

        const form = new FormData();

        form.append('file', image);
        form.append('upload_preset', 'g5ziunzg');

        const res = await Axios.post('YOUR_CLOUDINARY_URL', form)
        console.log(res)
        return res.data;
    }

这将返回一个带有 secure_url 的对象，您可以将其存储在 mongo 数据库中。我假设您有一个用于此任务的后端 API。

在您的 formSubmit 函数中，您可以首先调用此函数并接收此 secure_url 。

请注意，我在这里使用的是 axios 。此示例可以轻松转换为与 fetch 一起使用。

Answer 2

您不需要使用 Object.value ，因为 req.body.files 是一个数组，您需要在访问之前检查其长度。尝试一下：

const [file] = req.body.files

if (file) {
  // your logic here
}