edgee:弹弓错误[无效指令]

时间:2016-11-08 13:20:55

标签: javascript reactjs meteor amazon-s3 meteor-slingshot

所以我一直在尝试将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;
&#13;
&#13;

除此之外我还有一个setting.json文件,我存储了我的S3键。

度过美好的一天,不要忘记微笑。

1 个答案:

答案 0 :(得分:0)

我已经成功解决了这个问题。虽然我认为我的upload-rules.js在服务器文件夹中。结果证明不是正确的。将它移动到右侧文件夹后,一切正常。

因此,对于遇到同样问题的人,请仔细检查您的文件是否在正确的位置。