我正在构建这个ReactJS应用程序,在那里我想通过单击按钮上传图像并将其带到下一个视图,即裁剪窗口,然后在裁剪之后,我可以将其上传到服务器。
我现在遇到的问题是如何将图像从1个视图转移到另一个视图而不将其上传到服务器?
我尝试拍摄图像路径,但不幸的是,当UI刷新时,路径将被刷新。
那么,在这种情况下我可以使用哪些选项。
谢谢!
答案 0 :(得分:2)
昨天我处理了类似案件。我使用react-dropzone返回上传的文件,文件对象中的一个字段是预览'它包含uri当前上传的文件(它可能以某种方式缓存,但我还没有调查它。 在另一种观点中你只是做
答案 1 :(得分:1)
因此,您希望在视图之间保留图像信息。通过“查看”,您的意思是不同的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,可以这样使用:
首先,创建减速器
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
,则可以通过imagePath
访问props.imagePath
。 connect
函数还会为您的道具添加dispatch
功能。
最后,您可以通过在组件中调用来设置路径(但不是渲染函数本身:这将是anti-pattern)
props.dispatch( { type: 'SET_PATH', payload: "the_path" } )
最后,很容易在页面之间保持redux状态或使用dedicated middleware进行刷新。
答案 2 :(得分:0)
IndexedDB API
非常适合客户端,大文件存储。
结帐LocalForage。它使得使用IndexedDB变得容易,类似于使用localStorage
。
此解决方案允许您将图像客户端存储在所有主流浏览器中。您可以从全局存储中对其执行操作,并且在您需要时,您可以将其发送到服务器。
它还为您的应用程序提供了脱机缓存,其中图像不会在会话或网络连接之间丢失。
答案 3 :(得分:0)
您需要将图像文件作为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上