所以我一直在尝试将edgee:slingshot添加到我的Meteor + React项目中,但出于某种原因我一直得到同样的错误: "错误:指令myFileUploads似乎不存在[无效指令]"
我已按照教程实施所有信息,但似乎无法弄清楚我的代码有什么问题。
非常感谢任何帮助。
我的上传规则文件:
Slingshot.fileRestrictions("myFileUploads", {
allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
maxSize: 10 * 1024 * 1024 // 10 MB (use null for unlimited)
});
Slingshot.createDirective("myFileUploads", Slingshot.S3Storage, {
bucket: "ec2016",
region: "eu-central-1",
acl: "public-read",
authorize: function () {
//Deny uploads if user is not logged in.
if (!this.userId) {
var message = "Please login before posting files";
throw new Meteor.Error("Login Required", message);
}
return true;
},
key: function (file) {
//Store file into a directory by the user's username.
var user = Meteor.users.findOne(this.userId);
return user.username + "/" + file.name;
}
});

我的表格:
export default class AddSpark extends Component {
constructor(props) {
super(props);
this.upload = this.upload.bind(this)
}
createSpark(event){
event.preventDefault();
const spark = {
city: this.city.value,
person: this.person.value,
location: this.location.value,
title: this.title.value,
content: this.content.value,
url: this.url.value,
}
console.log(spark);
}
componentWillMount(){
// we create this rule both on client and server
Slingshot.fileRestrictions("myFileUploads", {
allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
maxSize: 10 * 1024 * 1024 // 10 MB (use null for unlimited)
});
}
upload(){
var uploader = new Slingshot.Upload("myFileUploads");
uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) {
if (error) {
// Log service detailed response
alert (error);
}
else {
Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});
}
});
}
render() {
return (
<div>
<form ref={(input) => this.sparkForm = input} onSubmit={(e) => this.createSpark(e)}>
<ControlLabel>Select your city</ControlLabel>
<select id="formControlsCity" placeholder="Choose your city" className="form-control" onClick={ moreOptions } ref={(input) => this.city = input}>
<option value="select">Choose your city</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Chengdu & Chongqing">Chengdu & Chongqing</option>
</select>
<ControlLabel>Select your person</ControlLabel>
<select id="formControlsPerson" placeholder="Choose your person" className="form-control" ref={(input) => this.person = input}>
<option value="select">First select your city</option>
</select>
<ControlLabel>Select your location</ControlLabel>
<select id="formControlsLocation" placeholder="Choose your location" className="form-control" ref={(input) => this.location = input}>
<option value="select">First select your city</option>
</select>
<ControlLabel>Title</ControlLabel>
<input type="text" label="Title" placeholder="Enter your title" className="form-control" ref={(input) => this.title = input}/>
<ControlLabel>Content</ControlLabel>
<textarea placeholder="Enter your comment here" className="form-control" ref={(input) => this.content = input}/>
<div className="upload-area">
<p className="alert alert-success text-center">
<span>Click or Drag an Image Here to Upload</span>
<input type="file" id="input" ref={(input) => this.url = input} onChange={this.upload} />
</p>
</div>
<Button type="submit">Submit</Button>
</form>
</div>
)}
}
&#13;
除此之外我还有一个setting.json文件,我存储了我的S3键。
度过美好的一天,不要忘记微笑。
答案 0 :(得分:0)
我已经成功解决了这个问题。虽然我认为我的upload-rules.js在服务器文件夹中。结果证明不是正确的。将它移动到右侧文件夹后,一切正常。
因此,对于遇到同样问题的人,请仔细检查您的文件是否在正确的位置。