使用文件作为参数进行Api调用

时间:2018-04-12 11:31:08

标签: javascript reactjs file endpoint fetch-api

我有这个处理程序来对端点进行api调用:

- (void)viewDidLoad {
    [super viewDidLoad];
    _txtAge.delegate=self;
    [_txtAge becomeFirstResponder];
    _txtAge.autocorrectionType = UITextAutocorrectionTypeNo;
}

- (void)textFieldDidBeginEditing:(UITextField*)textField
{
    UITextInputAssistantItem* item = [textField inputAssistantItem];
    item.leadingBarButtonGroups = @[];
    item.trailingBarButtonGroups = @[];
}

我想发送一个文件作为这样的请求的一部分:

handleFileChange(e) {
  e.preventDefault();
  fetch(apiAddress)
    .then((res) => {
      return res.json()
    }).then( (res)  => {
      this.props.onFileChange(JSON.stringify(res));
  });
}

如何使用该表单中添加的文件执行此操作?

1 个答案:

答案 0 :(得分:1)

这就像将文件发布到API一样简单:

handleFileChange(e) {
  e.preventDefault();
  let fileInput = document.getElementsByName("uploaded_file")[0];
  fetch('/yourEndpoint', {
    method: 'POST'
    body: fileInput.files[0] // This is your file object
    headers: {
      "Content-Type": fileInput.files[0].type // this is the MIME type of the data *
    },
  }).then(
    response => response.json()
  ).then( res => {
    this.props.onFileChange(JSON.stringify(res))
  });
}

*请注意,这是从文件扩展名生成的,因此很容易被欺骗