使用axios将图像发送到php文件

我创建的表单允许用户删除一些图像并进行预览。 现在我想将这些图像发送到我的数据库。 我正在使用axios将我的所有数据发送到php文件。 这是我收集图像的组件:</ p>

  import来自'react'的React; 
从'react-dropzone'导入Dropzone;
从'./导入{ImagePreview} ImagePreview';

导出const ImageInput =(props)=&gt; {
const imagePreviews = props.images.map(image =&gt; {
return&lt; ImagePreview key = {image.id} image = {image} onDelete = {props.deleteImage} /&gt;
})\ n
return(
&lt; div&gt;
&lt; Dropzone
className =“dropzone”
multiple = {true}
accept =“image / *”
onDrop = {props.addImage}&gt;

&lt; p&gt; drop here&lt; / p&gt;
&lt; / Dropzone&gt;
&lt; ul&gt;
{imagePreviews}
&lt; / ul&gt;
&lt; / div&gt;

}

</ code> </ pre>

我使用此函数将它们存储在父组件内的状态中:</ p>

  addImage =(images)  =&GT;  {

const {recipe} = this.state;
images.map(image =&gt; {
让img = {id:Math.random()。toString(36).substr(2,9) ,image:image}
recipe.images = [... recipe.images,img]
})
this.setState({recipe});
}
</ code> </ pre> \ n

以下是我如何向用户显示它们:</ p>

 从'react'导入React,{Component}; 

export类ImagePreview扩展 React.Component {
constructor(){
super();
this.state = {imagePreviewUrl:''}
}

componentWillMount(){
let reader = new FileReader(); \ n reader.readAsDataURL(this.props.image.image)
reader.onloadend =()=&gt; {
this.setState({imagePreviewUrl:reader.result})
}
}
render(){
return(
&lt; li className =“”&gt;
&lt; img className =“ image-preview“src = {this.state.imagePreviewUrl} /&gt;
&lt; button onClick = {()=&gt; this.props.onDelete(this.props.image.id)}&gt; delete&lt; / 按钮&gt;
&lt; / li&gt;

}
}
</ code> </ pre>

我应该如何将它们发送到我的php文件?</ p> \ n </ div>

展开原文

原文

I've created form that lets user to drop some images and preview them. Now I want to send these images to my database. I'm using axios for sending all my data to php file. Here is my component that collects images:

    import React from 'react';
    import Dropzone from 'react-dropzone';
    import {ImagePreview} from './ImagePreview';

    export const ImageInput = (props) => {
      const imagePreviews = props.images.map(image => {
        return <ImagePreview key={image.id} image={image} onDelete={props.deleteImage}/>
      })

  return (
    <div>
      <Dropzone
        className="dropzone"
        multiple={true}
        accept="image/*"
        onDrop={props.addImage}>
        <p>drop here</p>
      </Dropzone>
      <ul>
        {imagePreviews}
      </ul>
    </div>
  )
}

I'm storing them in state inside parent component using this function:

addImage = (images) => {

    const { recipe } = this.state;
    images.map(image => {
      let img = {id:Math.random().toString(36).substr(2, 9),image:image}
      recipe.images = [...recipe.images,img]
    })
    this.setState({ recipe });
  }

and here is how I'm displaying them to user:

import React,{Component} from 'react';

export class ImagePreview extends React.Component {
   constructor() {
     super();
     this.state= {imagePreviewUrl: ''}
   }

   componentWillMount() {
     let reader = new FileReader();
     reader.readAsDataURL(this.props.image.image)
     reader.onloadend = () => {
       this.setState({imagePreviewUrl: reader.result})
     }
   }
   render(){
     return (
       <li className="">
         <img className="image-preview" src={this.state.imagePreviewUrl} />
         <button onClick={()=>this.props.onDelete(this.props.image.id)}>delete </button>
       </li>
     )
   }
}

How should I send them to my php file?

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐