ボタンをクリックして画像をアップロードして、クロップウィンドウである次のビューに移動してからクロップした後、アップロードすることができるReactJSアプリケーションを作成していますそれをサーバーに送信します。ReactJSで画像をアップロード
私は今、イメージを1つのビューから別のビューにサーバーにアップロードせずに取得する方法を問題にしていますか？
私はイメージパスを取得しようとしましたが、残念ながらUIが更新されると、パスがフラッシュされます。
このような状況で私が使用できるオプションは何ですか？
ありがとうございました！
昨日私は同様の場合に取り組んだ。私はファイルを返すreact-dropzoneを使用しています。ファイルオブジェクトのフィールドの1つが「プレビュー」です。現在アップロードされているファイルのURIが含まれています（何とかキャッシュされていますが、まだ調査していません）。 あなただけが行っている別のビューで
このようにして、ビュー間の画像情報を保持したいと考えています。 「表示」とは、別のHTMLページを意味しますか？私は物事の多くの標準的な方法は以下のようになり推測する：
状態を維持しながら：
import { Router, Route, browserHistory } from 'react-router'
// Iy you use redux to handle the state
import { createStore } from 'redux'
import myReducer from 'my-reducer'
const store = createStore(myReducer)
const history = syncHistoryWithStore(browserHistory, store)
// Your view components
function Top(props) { ... }
function UploadImage(props) { ... }
function EditImage(props) { ... }
// The Router itself
ReactDOM.render(
<Router history={history}>
<Route path="/" component={Top} >
<Route path="upload-image" component={UploadImage} />
<Route path="edit-image" component={EditImage} />
</Route>
</Router>)
あなたが前にReduxの使用したことがない場合は、あなたが使用することができますそれ彼の方法：
まず、減速
import { combineReducers } from 'redux'
const myReducer = combineReducers({ imagePath })
// This is called a reducer function
function imagePath(oldState = "", action) {
switch(action.type) {
case 'SET_PATH':
return action.payload
}
}
次に、状態値を得るためにあなたのコンポーネントを接続する（例えば、 UploadImage）
const ReduxUploadImage = connect(function(state) {
return {
imagePath: state.imagePath
}
})(UploadImage)
は、今あなたがprops.imagePathを通じてimagePathにアクセスすることができ、代わりにUploadImageのReduxUploadImage使用している場合。また、connect関数は、dispatch関数をあなたの小道具に追加します。
最後に、あなたはあなたのコンポーネント内で呼び出すことによって、パスを設定（ただし、機能自体をレンダリングする：これはanti-patternだろう）することができます。最後
props.dispatch({ type: 'SET_PATH', payload: "the_path" })
、ページまたは間Reduxの状態を持続することは容易ですdedicated middlewareを使用してリフレッシュしてください。
IndexedDB APIは、クライアント側の大きなファイルストレージに最適です。
チェックアウトLocalForage。 localStorageを使用するのと同様に、IndexedDBを簡単に使用できます。
このソリューションを使用すると、すべての主要なブラウザでイメージクライアント側を保存できます。グローバルストアから操作を実行することができ、必要なときにサーバーに送ることができます。
また、セッションやネットワーク接続の間にイメージが失われないオフラインキャッシュをアプリケーションに提供します。
画像ファイルをブロブとして読み込み、画像操作のためにさまざまなコンポーネントをレンダリングする親コンポーネントにその画像ファイルを保存する必要があります。いくつかのファイルの入力要素で、あなたが好きなように、あなたができるだけ多くのコンポーネントにそのファイルを置くことができ、ユーザ
handleImageChange = e => {
e.preventDefault();
const reader = new FileReader();
const file = e.target.files[0];
reader.onloadend =() => {
this.setState({
file,
imagePreview: reader.result
});
};
if (file) {
reader.readAsDataURL(file);
}
};
が選択した画像を処理するために、このような機能を必要としています。リフレッシュの間にファイルを保存したい場合は、ファイルをlocalStorageまたはindexedDBに配置する必要があります。
パスを保持する代わりに、画像をdata-uriとして読み込みます。また、イメージをリフレッシュ間で永続化したい場合は、イメージをlocalstorageに保存することもできます。 – hazardous
https://www.npmjs.com/package/blob-utilのようなライブラリを使って、保存用の画像からデータへの変換を処理してください。 – hazardous