0

所以我一直在尝试将 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>
  )}
}

除此之外，我当然还有一个 setting.json 文件，用于存储我的 S3 密钥。

祝你有美好的一天，不要忘记微笑。

4

1 回答 1

0

我已经设法解决了这个问题。尽管我认为我的 upload-rules.js 在服务器文件夹中。事实证明，这不是正确的。将其移动到正确的文件夹后，一切正常。

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

于 2016-11-08T13:48:29.143 回答