Как загрузить один файл с заголовком, используя busboy - PullRequest
Новая
       12

Как загрузить один файл с заголовком, используя busboy

0 голосов
/ 25 октября 2019

Я пытаюсь загрузить изображение с его заголовком в облачное хранилище, используя реакцию в качестве внешнего интерфейса и busboy для обработки загрузки в серверной части, но, похоже, я не могу заставить его работать. Когда я отправляю форму, я получаю сообщение о том, что event.target.files [0] не определен. Есть предложения?

Код реагирования 

handleSubmit = (event) => {
        event.preventDefault();

        const image = event.target.files[0];
        const formData = new FormData();
        formData.append('image', image, image.name);
        formData.append('title', this.state.title);
        this.props.addPost(formData)
    };
<form onSubmit={this.handleSubmit}>
     <TextField name="title" type="text" label="Title"placeholder="Add a title"/>
     <input type="file" id="imageInput"/>

     <Button type="submit" variant="contained" color="primary" className={classes.submitButton} disabled={loading}>
            Submit
     </Button>
</form>

и моя функция API 

exports.addPost = (req,res)=> {
    const BusBoy = require('busboy');
    const path = require('path');
    const os = require('os');
    const fs = require('fs');

    const busboy = new BusBoy({ headers: req.headers });

    let imageToBeUploaded = {};
    let imageFileName;

    busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
        console.log(fieldname, file, filename, encoding, mimetype);
        if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
          return res.status(400).json({ error: 'Wrong file type submitted' });
        }
        // my.image.png => ['my', 'image', 'png']
        const imageExtension = filename.split('.')[filename.split('.').length - 1];
        // 32756238461724837.png
        imageFileName = `${Math.round(
          Math.random() * 1000000000000
        ).toString()}.${imageExtension}`;
        const filepath = path.join(os.tmpdir(), imageFileName);
        imageToBeUploaded = { filepath, mimetype };
        file.pipe(fs.createWriteStream(filepath));
      });
      busboy.on('finish', () => {
        admin
          .storage()
          .bucket()
          .upload(imageToBeUploaded.filepath, {
            resumable: false,
            metadata: {
              metadata: {
                contentType: imageToBeUploaded.mimetype
              }
            }
          })
          .then(() => {
            const imgUrl = `https://firebasestorage.googleapis.com/v0/b/${
              config.storageBucket
            }/o/${imageFileName}?alt=media`;

            const newPost = {
                imgUrl: imgUrl,
                userHandle: req.user.handle,
                uniName: req.user.uniName,
                title: req.body.title,
                createdAt: new Date().toISOString(),
                likeCount:0,
                commentCount:0
            };
            db.collection('posts').add(newPost).then((doc) => {
                const resPost = newPost;
                resPost.postId = doc.id;
                res.json(resPost);
            })
          })
          .then(() => {
            return res.json({ message: 'image uploaded successfully' });
          })
          .catch((err) => {
            console.error(err);
            return res.status(500).json({ error: 'something went wrong' });
          });
      });
      busboy.end(req.rawBody);   
};

1 Ответ

1 голос
/ 25 октября 2019

Вы связали handleSubmit с формой, но затем выполните это в коде: 

handleSubmit = (event) => {
    event.preventDefault();

    const image = event.target.files[0];

Поскольку обработчик привязан к форме, event.target относится к форме. И form не имеет свойства files, поэтому появляется сообщение об ошибке.

Вам нужно будет найти input и вызвать files[0] для этого.

В React вы обычно ищите поле , определяя свойство ref в поле: 

 <input type="file" id="imageInput" ref="imageInput" />

А затем в своем коде: 

const input = this.refs.imageInput;

const image = imageInput.files[0];
...