使用Meteor和React-Dropzone上传文件

Le Dinh Nhat Khanh

我正在尝试使用react-dropzone将图像上传到流星集合:

流星包使用:meteor add jalik:ufsmeteor 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文件,都没有创建。

Le Dinh Nhat Khanh

onDrop将返回文件列表,而不是单个文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Dropzone.js和php文件上传

来自分类Dev

无法使用dropzone上传多个文件

来自分类Dev

如何从dropzone.js上传和删除文件

来自分类Dev

使用Dropzone将文件上传到Google云端硬盘

来自分类Dev

使用Sailzone.js 0.10和Skipper使用Dropzone.js上传多个文件

来自分类Dev

有没有办法使用Puppeteer在React Dropzone中上传文件?

来自分类Dev

使用verot_upload类和dropzone.js上传codeigniter文件

来自分类Dev

React Dropzone:需要传递带有文件的ID才能上传

来自分类Dev

使用Paperclip使用Dropzone.js上传Rails 4文件

来自分类Dev

如何使用 style="display: none;" 在 dropzone.js 上上传文件 使用硒?

来自分类Dev

如何使用量角器的dropzone.js测试上传文件?

来自分类Dev

使用Dropzone.js在Struts2中上传多个文件

来自分类Dev

在每个文件上传中使用dropzone.js发送自定义数据

来自分类Dev

以一种形式使用单独的Dropzone上传多个单个文件

来自分类Dev

使用Dropzone.js问题将文件上传到Amazon S3

来自分类Dev

使用Dropzone JS通过常规HTTP请求而非AJAX上传文件

来自分类Dev

使用PHP上传Dropzone JS文件期间在PHP中调用Javascript函数

来自分类Dev

如何使用自定义确认对话框通过 dropzone 删除多个上传的文件?

来自分类Dev

使用 dropzone.js 上传文件 OnClick 与 ASP.NET 服务

来自分类Dev

如何使用react和Typescript显示上传和上传的文件?

来自分类Dev

使用 Meteor + React 上传文件无声无息地失败

来自分类Dev

REACT DROPZONE:上传后获取数据:图像

来自分类Dev

使用Dropzone.js上传订单

来自分类Dev

使用dropzone而不自动上传

来自分类Dev

文件上传后重置Dropzone

来自分类Dev

laravel + dropzone文件未上传

来自分类Dev

不能使用dropzone和multer多次上传

来自分类Dev

无法使用Multer,React Native和Axios上传文件

来自分类Dev

使用 Node 和 React 上传基本文件

Related 相关文章

  1. 1

    Dropzone.js和php文件上传

  2. 2

    无法使用dropzone上传多个文件

  3. 3

    如何从dropzone.js上传和删除文件

  4. 4

    使用Dropzone将文件上传到Google云端硬盘

  5. 5

    使用Sailzone.js 0.10和Skipper使用Dropzone.js上传多个文件

  6. 6

    有没有办法使用Puppeteer在React Dropzone中上传文件?

  7. 7

    使用verot_upload类和dropzone.js上传codeigniter文件

  8. 8

    React Dropzone:需要传递带有文件的ID才能上传

  9. 9

    使用Paperclip使用Dropzone.js上传Rails 4文件

  10. 10

    如何使用 style="display: none;" 在 dropzone.js 上上传文件 使用硒?

  11. 11

    如何使用量角器的dropzone.js测试上传文件?

  12. 12

    使用Dropzone.js在Struts2中上传多个文件

  13. 13

    在每个文件上传中使用dropzone.js发送自定义数据

  14. 14

    以一种形式使用单独的Dropzone上传多个单个文件

  15. 15

    使用Dropzone.js问题将文件上传到Amazon S3

  16. 16

    使用Dropzone JS通过常规HTTP请求而非AJAX上传文件

  17. 17

    使用PHP上传Dropzone JS文件期间在PHP中调用Javascript函数

  18. 18

    如何使用自定义确认对话框通过 dropzone 删除多个上传的文件?

  19. 19

    使用 dropzone.js 上传文件 OnClick 与 ASP.NET 服务

  20. 20

    如何使用react和Typescript显示上传和上传的文件?

  21. 21

    使用 Meteor + React 上传文件无声无息地失败

  22. 22

    REACT DROPZONE:上传后获取数据:图像

  23. 23

    使用Dropzone.js上传订单

  24. 24

    使用dropzone而不自动上传

  25. 25

    文件上传后重置Dropzone

  26. 26

    laravel + dropzone文件未上传

  27. 27

    不能使用dropzone和multer多次上传

  28. 28

    无法使用Multer,React Native和Axios上传文件

  29. 29

    使用 Node 和 React 上传基本文件

热门标签

归档