douren7179 2017-11-06 17:01
浏览 166

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

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?

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 求差集那个函数有问题,有无佬可以解决
    • ¥15 【提问】基于Invest的水源涵养
    • ¥20 微信网友居然可以通过vx号找到我绑的手机号
    • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
    • ¥15 解riccati方程组
    • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
    • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
    • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
    • ¥50 树莓派安卓APK系统签名
    • ¥65 汇编语言除法溢出问题