显示存储在ostrio:files中的图像

时间:2017-07-27 10:49:39

标签: file reactjs meteor collections

在ostrio中:文件docs使用findOne函数,在我的情况下不方便,我需要find()参数来按用户ID进行过滤,依此类推。 我从官方教程中使用常见的Meteor React方法如下:

renderImages(){
    return this.props.images.map((image) => (
        <Pic src={image.link()} />
    ));
}

render() {
...
    return (
        <form>
            <FormGroup controlId="formControlsFile">
                <Media>
                    {this.renderImages()}
                </Media>
...
            </FormGroup>
        </form>);
    }
}

export default createContainer(props => {
    Meteor.subscribe("files.images.all");
    return {
        images: Images.find({name: "1.jpeg"}).fetch(),
    }
}, App);

这是集合:

import { Meteor } from 'meteor/meteor';
import { FilesCollection } from 'meteor/ostrio:files';

const Images = new FilesCollection({
    collectionName: 'Images',
    allowClientCode: false, // Disallow remove files from Client
    onBeforeUpload(file) {
...
});

if (Meteor.isServer) {
    Meteor.publish('files.images.all', function () {
        return Images.find().fetch();
    });
}

export default Images;

和Pic元素:

import React from 'react';
import {createContainer} from 'meteor/react-meteor-data'

class Pic extends React.Component {
    render() {
        return (
            <img width={64} height={64} src={this.props.src} alt="Image"/>
        );
    }
}

export default createContainer(props => {
    console.log("Image src: " + props.src);
    return {
        src: (props.src ? props.src : "no-image-64x64.jpg"),
    }
}, Pic);

此代码导致以下异常:

I20170727-13:46:02.470(3)? Exception from sub files.images.all id uXo24fBLqH8rsMiDy Error: Publish function returned an array of non-Cursors
I20170727-13:46:02.472(3)?     at [object Object]._.extend._publishHandlerResult (packages/ddp-server/livedata_server.js:1098:20)
I20170727-13:46:02.472(3)?     at [object Object]._.extend._runHandler (packages/ddp-server/livedata_server.js:1060:10)
I20170727-13:46:02.473(3)?     at [object Object]._.extend._startSubscription (packages/ddp-server/livedata_server.js:859:9)
I20170727-13:46:02.473(3)?     at [object Object]._.extend.protocol_handlers.sub (packages/ddp-server/livedata_server.js:625:12)
I20170727-13:46:02.474(3)?     at packages/ddp-server/livedata_server.js:559:43

1 个答案:

答案 0 :(得分:0)

以下是两个重要的两个因素:

<强> 1。返回光标而不是数组

你的发布函数需要返回一个游标,目前它返回一个数组(通过调用fetch),这不是游标。

您不需要在出版物中获取,但在客户端。该发布仅用于通过给定的过滤器/转换/排序等将客户端集合与服务器集合同步。

<强> 2。您需要从Mongo.Collection而不是FilesCollection

获取数据

FilesCollection本身不是集合​​,但使用了Mongo.Collection。如果要使用集合中的数据,则需要像这样引用集合:Images.collection.find

返回光标的示例:

Meteor.publish('files.images.all', function () {

    // find data and return cursor if
    // data exists
    const data = Images.collection.find();
    if (data && data.count() >0)
        return data;

    this.ready(); // set ready if no data exists
});

这同样适用于您的客户:

export default createContainer(props => {
    Meteor.subscribe("files.images.all");
    return {
        images: Images.collection.find({name: "1.jpeg"}).fetch(),
    }
}, App);

还有更多内容可供ostrio:files documentation

阅读