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