React Image上傳Dropzone

Question

我有點麻煩。 我正在使用react編寫圖像上傳器，我創建了一個上傳組件，我希望在將其發送到后端並將其上傳到cdn之前顯示預覽圖像。 但是，我無法從州獲得預覽。 沒有錯誤，它似乎沒有從州獲得預覽道具。 很想知道你的意見。

赫雷斯是我的組成部分

 import React, { PropTypes } from 'react' var Dropzone = require('react-dropzone'); import './uploader.scss' class Uploader extends React.Component { constructor(props){ super(props) this.state = { files: [] }; } onDrop(files) { console.log(files); let filename = files[0].name; let preview = files[0].preview; this.setState({ files: files, name: filename, preview: preview }); } render() { return ( <div className = 'dropzoneContainer' > <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop} className= 'zone' multiple={false}> <div className = 'dropzone' >Upload Image</div> {this.state.files.preview ? <div> <img src={this.state.preview} /> </div> : null} </Dropzone> </div> ); } } export default Uploader 

我正在使用這個反應拖放庫http://okonet.ru/react-dropzone/

謝謝

Answer 1

這是一段代碼：

{this.state.files.preview ? <div>
  <img src={this.state.preview} />
</div> : null}

你將this.state.files.preview更改為this.state.preview ，你應該沒問題。

希望這可以幫助！

Answer 2

嘗試

files.length == 0?
<Dropzone onDrop={this.onDrop.bind(this)}>
<p>Try dropping some files here, or click to select files to upload.
</p>
</Dropzone>
:<div>{files.map(f => <img src={f.preview} />)}</div> 

Answer 3

您可以使用React Dropzone Uploader ，它可以為您提供開箱即用的文件預覽，還可以為您處理上傳。

import 'react-dropzone-uploader/dist/styles.css'
import Dropzone from 'react-dropzone-uploader'

const Uploader = () => {  
  return (
    <Dropzone
      getUploadParams={() => ({ url: 'https://httpbin.org/post' })} // specify upload params and url for your files
      onChangeStatus={({ meta, file }, status) => { console.log(status, meta, file) }}
      onSubmit={(files) => { console.log(files.map(f => f.meta)) }}
      accept="image/*,audio/*,video/*"
    />
  )
}

上傳有進度指示器，可以取消或重新啟動。 用戶界面完全可以自定義。

完全披露：我寫了這個庫。