使用 Meteor 和 React-Dropzone 上传文件

Question

我正在尝试使用 react-dropzone 将图像上传到 meteor collection:

Meteor 包使用：meteor add jalik:ufs 和 meteor add jalik:ufs-gridfs

imports/api/images

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { UploadFS } from 'meteor/jalik:ufs';

export const Images = new Mongo.Collection('images');
export const Thumbs = new Mongo.Collection('thumbs');

if(Meteor.isServer) {
    Meteor.publish('thumbs', function(id) {
        return Thumbs.find({
            originalStore: 'images',
            originalId: {
                $in: ids
            }
        });
    })

    Meteor.publish('images', function() {
        return Images.find({});
    })
}

function loggedIn(userId) {
  return !!userId;
}

export const ThumbsStore = new UploadFS.store.GridFS({
  collection: Thumbs,
  name: 'thumbs',
  permissions: new UploadFS.StorePermissions({
    insert: loggedIn,
    update: loggedIn,
    remove: loggedIn
  }),
  transformWrite(from, to, fileId, file) {
    // Resize to 32x32
    const gm = require('gm');

    gm(from, file.name)
      .resize(32, 32)
      .gravity('Center')
      .extent(32, 32)
      .quality(75)
      .stream()
      .pipe(to);
  }
});

export const ImagesStore = new UploadFS.store.GridFS({
    collection: Images,
    name: 'images',
    permissions: new UploadFS.StorePermissions({
        insert: loggedIn,
        update: loggedIn,
        remove: loggedIn
    }),
    filter: new UploadFS.Filter({
        contentTypes: ['image/*']
    }),
    copyTo: [
        ThumbsStore
    ]
});

Meteor.methods({
    upload: function(file) {
        const photo = {
            name: file.name,
            type: file.type,
            size: file.size
        };

        const upload = new UploadFS.Uploader({
            data: file,
            file: photo,
            store: ImagesStore,
            onError: () => {
                console.log('error');
            },
            onComplete: console.log('Completed'),
        });

        upload.start();
    }
})

在我使用 react-dropzone 的组件中：

onDrop(file) {
        UploadFS.selectFile(() => {
            Meteor.call('upload', file)
        })
    }

但是当我尝试将文件放入其中时，它什么也没显示，在我检查了 mongo 命令后，根本没有图像和缩略图集合，即使我将它导入 main.js 服务器上的文件，它没有被创建。

Answer 1

onDrop 将 return 文件列表，而不是单个文件。

使用 Meteor 和 React-Dropzone 上传文件

Upload file with Meteor and React-Dropzone

image-uploading

mongodb

meteor

reactjs