मैं बैकएंड में अपलोड को संभालने के लिए फ्रंटएंड और बसबॉय के रूप में प्रतिक्रिया का उपयोग करके क्लाउड स्टोरेज पर इसके शीर्षक के साथ एक छवि अपलोड करने का प्रयास कर रहा हूं लेकिन मुझे यह काम नहीं मिल रहा है। जब मैं फॉर्म जमा करता हूं तो मुझे यह कहते हुए एक त्रुटि मिलती है कि 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>

और मेरा एपीआई फ़ंक्शन

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
sotos bic 25 अक्टूबर 2019, 15:06

1 उत्तर

सबसे बढ़िया उत्तर

आपने handleSubmit को फॉर्म से जोड़ दिया है, लेकिन फिर इसे कोड में करें:

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

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

चूंकि हैंडलर फॉर्म से जुड़ा हुआ है, event.target फॉर्म को संदर्भित करता है। और एक form में files गुण नहीं है, इसलिए त्रुटि संदेश है।

आपको input को देखना होगा और उस पर files[0] को कॉल करना होगा।

प्रतिक्रिया में आप आमतौर पर फ़ील्ड को देखें फ़ील्ड में एक ref प्रॉपर्टी को परिभाषित करके:

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

और फिर आपके कोड में:

const input = this.refs.imageInput;

const image = imageInput.files[0];
1
Frank van Puffelen 25 अक्टूबर 2019, 16:16