Question

如何在提交按钮时发送表单数据单击如何将图像发送到nodejs服务器请给我选择我应该在此代码中更改的内容。请帮帮我，我该怎么做。

handleProductImage(e) {
 this.props.updateProductImage(e.target.files[0])
 }
  handleAddProduct(){
   let formData = new FormData()
   formData.append('File', this.props.productImage[0])
    Axios({
     method: 'POST',
     url: '/api/ecommerce/product/add',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'multipart/form-data'
       },
      data: {
        productImage:formData,

      }
     }).then((response)=>{
       if (response.data.success){
         window.location.href = response.data.redirectTo
     } else {
        console.log("data not saved");
     }
    })
   render(){
      return(<FlatButton
              label="Choose an Image"
              labelPosition="before"
              style={styles.uploadButton}
              containerElement="label"
            >
              <input type="file"
                style={styles.uploadInput}
                value={this.props.productImage}
                onClick={this.handleProductImage}/>
            </FlatButton>
      )}

Answer 1

我通常使用axios库向服务器发出请求。在updateProductImage

let data = new FormData();
data.append('file', file);
axios.post(url, data).then((response) => {
  console.log(response);
})

Answer 2

如果您使用的是es6，则可以使用fetch创建form-data以轻松上传图片/文件

var data = new FormData()
data.append('file', ____file_here____)
data.append('user', 'hubot')

fetch('/api_url', {
  method: 'POST',
  body: data
})
.then() {
    /* your response here */
}

如何通过reactjs和redux添加图像

2 个答案: