Today I Learned

1.反応

React-dropZon eライブラリを使用して画像をプレビューする
画像を使用してライブラリをアップロードする必要があります.
現在のプロジェクトでは、主に画像を処理する際に必要な機能には、アップロード時のファイル数制限、容量制限、ドラッグアンドドロップが含まれます.
実際、ドラッグアンドドロップ機能は不要ですが、あるように見えます(~∀~)
2つの選択肢があります.1つは自分で作る方法で、もう1つは倉庫を分解して修理する方法です.
自分で作ればもちろん勉強もたくさんありますが、時間がかかるのでライブラリを探し始め、アップロードライブラリで圧倒的な優位を占め、私たちのプロジェクトに最適だと思っていたDropZoneを使用しました.
想像していたほど多くはありませんが、本格的な羽毛バニラで十分です.
https://github.com/react-dropzone/react-dropzone/

取付

yarn add react-dropzone

の使い方は2つあります.Wrapperコンポーネントを使いました.

公式の羽毛バニラにはこう書いてありますが、

import React from 'react'
import Dropzone from 'react-dropzone'

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

私たちに合ったプロジェクトをカスタマイズしました.

import React from 'react'
import Dropzone from 'react-dropzone'
import { useDispatch } from 'react-redux';

const onDrop = useCallback((acceptedFile) => {
  const reader = new FileReader();  
  const dispatch = useDispatch();
  reader.readAsDataURL(acceptedFile[0]);
  reader.onload = () => {
    dispatch()
  }

}, [])
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

<Dropzone multiple={false} accept={"image/gif, image/jpg, image/jpeg, image/png"} onDrop={onDrop}>
    {({getRootProps, getInputProps}) => (
      <section>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
		  // ↓파일 업로드를 표시할 element
		  <img/>
        </div>
      </section>
    )}
  </Dropzone>

ファイルをアップロードすると、javascriptから提供されたFileReaderを使用してファイルを読み取り、URLを取得し、画像ラベルのsrcに入れてプレビューできます.
Dropzoneでサポートされている有用なキーワードを記録して、将来の使用に備えます.

倍数:複数選択の真面ファイル、1つの仮面

のみ

maxSize:最大許容ファイルサイズ

maxFiles:最大許容ファイル数

accept:ファイル拡張子制限ex)「image/gif,image/jpg...」

少し時間がかかりましたが、大きな障害もなく実現できてよかったです.

2.CS学習

第9章Webブラウザ(p.365～p.370)

JQuery

Dom関数には2つの問題があります.
1.関数の動作はブラウザによって異なる場合があります.
2.車を使うのは親和性がない.
この問題を解決するために、JQueryが現れ、Jクエリは収集器やイベントハンドラなどの動作を組み合わせます.

SVG

スケーラブルベクトルシェイプ(サイズ変更可能なベクトルシェイプ)
グラフィックとテキストをより美しくすることができますが、寸法言語とはまったく異なります.

JSON

JavaScriptオブジェクトコメント
JavaScriptオブジェクトを読みやすく表示します.
JSONを使用すると、JavaScriptからデータをエクスポートおよびインポートする際に追加コードを記述する必要はありません.

To Do

1.「完了」プロジェクト反応-dropzon eライブラリを使用してファイルをアップロードする

2.CS学習を完了する

Always完了)アルゴリズムの最低1つの問題-20319's Algorithm

Today's Short Report

#DropZone