弹弓的进展是NaN或1(流星+反应)

时间:2017-12-21 09:58:48

标签: reactjs meteor-slingshot

我正在使用Meteor,Slingshot和React。 Slingshot的图片上传到亚马逊正在运作,但我无法获得进度指示。

当我console.log(upload.progress())时,日志返回NaN,直到上传完成,此时它返回1。对于进度指示器,我需要一个%来处理。

import React from "react";
const upload = new Slingshot.Upload("myImageUploads");

class Uploader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.handleUpload = this.handleUpload.bind(this);
    }

    handleUpload() {
        const file = this.fileInput.files[0];

        upload.send(file, function(error, downloadUrl) {
            if (error) {
                console.error("Error uploading");
                alert(error);
            } else {
                console.log("Success!");
                console.log(downloadUrl);
                Meteor.call(
                    "user.updatePic",
                    {
                        imgUrl: downloadUrl
                    },
                    err => {
                        if (err) {
                            console.error(err);
                        }
                    }
                );
            }
        });

        setInterval(() => {
            console.log(upload.progress());
        }, 100);
    }

    render() {
        return (
            <div>
                <input
                    type="file"
                    name="Uploader"
                    id="input"
                    ref={input => (this.fileInput = input)}
                />
                <button
                    type="button"
                    className="btn btn--iconOnly"
                    onClick={this.handleUpload}
                >
                    Upload
                </button>
            </div>
        );
    }
}

export default Uploader;

0 个答案:

没有答案