Question

我一直在努力上传文件（图片）以解析云并将其保存在我的解析类中。我找不到关于它是如何工作的适当文档。

这是我的上传表单组件/类（ES6，React-Parse，React，我通过父组件连接到解析））：

import React from 'react';
import { Parse } from 'parse';
import ParseReact from 'parse-react';
import mui from 'material-ui';
import { TextField, RaisedButton } from 'material-ui';

class AddChallenge extends React.Component{

  constructor() {
    super();
    this.state = {
      imageFile: '',
    };
  }

  _onUpload(e) {

    var file = e.target.files[0];
    var parseFile = new Parse.File('image-name', file);
    console.log(parseFile);
    this.state.imageFile = parseFile;
  }


  _addChallenge(){
    // this.preventDefault();
    var theme = this.refs.theme.getValue(); //take value
    var timespan = this.refs.timespan.getValue(); //take value
    timespan = parseInt(timespan) * 86400;
    var parsefile = this.state.imageFile;
    console.log(parsefile);


    // Passing data to parse
    parsefile.save().then(function() {
      // The file has been saved to Parse.
      console.log('was saved?');
    }, function(error) {
      // The file either could not be read, or could not be saved to Parse.
    });

    console.log(parsefile.url());

    ParseReact.Mutation.Create("Challenge", {
      theme: theme,
      timespan: timespan,
      archived: false,
      active: true
    }).dispatch().then(function() {
    });
  }

  render() {
    let style = {
      input: {
        cursor: 'pointer',
        position: 'absolute',
        top: '0',
        bottom: '0',
        right: '0',
        left: '0',
        width: '100%',
        opacity: '0',
      }
    }

    return (
      <form onSubmit={this._addChallenge.bind(this)}>
        <TextField
          ref="theme"
          hintText="ex Weekend Drunkster"
          floatingLabelText="Title" />
        <br />
        <TextField
          ref="timespan"
          hintText="1"
          floatingLabelText="Duration (days)" />
        <br />

        <RaisedButton label="Choose an Image">
          <input type="file" id="uploader" ref="uploader" onChange={this._onUpload.bind(this)} style={style.input}></input>
        </RaisedButton>
        <br />

        <RaisedButton label="Submit" primary={true}>
          <input type="submit" value="Post" style={style.input} />
        </RaisedButton>
      </form>

    );
  }
}
export default AddChallenge;

解析save()基于parse.file documentation，但据我所知，我错了。即使then()函数打印我的日志（就好像它已保存）。

一般来说，如何保存图像来解析类？

Answer 1

在观察中设置你的对象，在这种情况下，我有一个名为Event的自定义Parse对象，它有一个名为primaryPhoto的列，我将保存Parse.File对象< / p>

observe: function () {
    return {

        event: (new Parse.Query('Event'))
            .equalTo('objectId', this.getParams().eventId),
    }
},

现在这里是保存图像并与事件对象相关联的代码

_handleSaveImage: function() {
    var imageFile = new Parse.File("mypic.jpg", {base64: this.state.preview});
    var that = this;

    return imageFile.save().then(function () {

        return ParseReact.Mutation.Set(that.data.event[0], {'primaryPhoto':imageFile}).dispatch();

    }, function (error) {
        console.log("Error");
        console.log(error);
    });
},

使用react js上传文件/图像来解析云/类？

1 个答案: