我正在构建这个 ReactJS 应用程序，我想在其中通过单击按钮上传图像并将其带到下一个视图，即裁剪窗口，然后在裁剪后将其上传到服务器.
我现在遇到的问题是如何将图像从一个视图带到另一个视图而不将其上传到服务器？
我尝试获取图像路径，但不幸的是，当 UI 刷新时，路径会被刷新。
那么，在这种情况下我可以使用哪些选项。
谢谢！
【问题讨论】：
昨天我处理了类似的案例。我正在使用返回上传文件的 react-dropzone，文件对象中的一个字段是“预览”，它包含当前上传文件的 uri（它可能以某种方式缓存，但我还没有调查它）。 在另一个视图中你只是在做
【讨论】：
因此，您希望在视图之间保留图像信息。 “视图”是指不同的 HTML 页面吗？我想一个更标准的做事方式是：
如果你从未使用过客户端路由，它看起来像这样（使用 react-router）：
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，可以这样使用：
首先，创建reducer
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)
现在，如果您使用ReduxUploadImage 而不是UploadImage，则可以通过props.imagePath 访问imagePath。 connect 函数还会为你的 props 添加一个 dispatch 函数。
最后，您可以通过在组件中调用来设置路径（但不是渲染函数本身：这将是一个anti-pattern）
props.dispatch( { type: 'SET_PATH', payload: "the_path" } )
最后，使用dedicated middleware可以很容易地保持页面之间的redux状态或刷新。
【讨论】：
IndexedDB API 非常适合客户端、大文件存储。
结帐LocalForage。它使 IndexedDB 的使用变得简单，类似于使用 localStorage。
此解决方案将允许您使用所有主要浏览器存储图像客户端。您可以从全局存储对其执行操作，并且可以在需要时将其发送到服务器。
它还为您的应用程序提供离线缓存，其中图像不会在会话或网络连接之间丢失。
【讨论】：
您需要将图像文件作为 blob 读取，并将其保存在负责渲染不同组件以进行图像操作的父组件上。在某些文件输入元素中，您需要这样的函数来处理用户选择的图像
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 上
【讨论】：