react 拖拽上傳

    最近項目要求一個拖拽上傳圖片的功能，項目要求的時間也比較緊，本着不重復造車輪以及沒時間去從零開發的原則，在谷歌中搜索的一些文檔，果然發現了一個開源的拖拽組件，react-dropzone，這個react拖拽組件，官方文檔描述的很詳細，可以根據自己的需求進行封裝。

安裝 react-dropzone

npm install --save react-dropzone

引入到項目

import Dropzone from 'react-dropzone'

應用

不多說直接來個拿來就能用的例子

class Basic extends React.Component {
  constructor() {
    super()
    this.state = { files: [] }
  }

  onDrop(files) {
    this.setState({
      files
    });
  }

  render() {
    return (
      <section>
        <div className="dropzone">
          <Dropzone onDrop={this.onDrop.bind(this)}>
            <p>Try dropping some files here, or click to select files to upload.</p>
          </Dropzone>
        </div>
        <aside>
          <h2>Dropped files</h2>
          <ul>
            {
              this.state.files.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
        </aside>
      </section>
    );
  }
}

<Basic />

當把圖片組件區域的時候的時候,會觸發組建的onDrop方法，方法會將file對象傳入！

將文件傳到后台

    將文件發送到服務器，要注意的就是要將file對象包裝到FormData中。

let formFile = new FormData()   //  創建一個FormData對象用來儲存file對象
formFile.append("file", file)  // 將file對象添加到實例化的FormData對象中
agent.post(url, {  // 通過ajax或者其他工具發送給后台
    data: formFile
}

    要封裝成圖片上傳組件，需要預覽功能，還可以用到window.URL.createObjectURL方法，這個方法的功能就是生成一個地址，不需要接受后台回傳回來的圖片地址，直接就可以通過這個地址來顯示圖片,減少了請求圖片的時間和流量。

let fileurl = window.URL.createObjectURL(file)  // 創建本地連接 直接從本地獲取圖片來展示 用來減少無用的請求

    了解這幾點，就可以進行自己組件的開發了，由於組件代碼不是很難，根據自己用到的各種庫的不同，所以只挑重要的代碼寫出來，有遇到問題的歡迎隨時留言