1

我使用 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;
4

0 回答 0