使用ReactJS

时间:2017-03-13 07:01:36

标签: reactjs image-uploading

我正在构建这个ReactJS应用程序,在那里我想通过单击按钮上传图像并将其带到下一个视图,即裁剪窗口,然后在裁剪之后,我可以将其上传到服务器。

我现在遇到的问题是如何将图像从1个视图转移到另一个视图而不将其上传到服务器?

我尝试拍摄图像路径,但不幸的是,当UI刷新时,路径将被刷新。

那么,在这种情况下我可以使用哪些选项。

谢谢!

4 个答案:

答案 0 :(得分:2)

昨天我处理了类似案件。我使用react-dropzone返回上传的文件,文件对象中的一个字段是预览'它包含uri当前上传的文件(它可能以某种方式缓存,但我还没有调查它。 在另一种观点中你只是做

答案 1 :(得分:1)

因此,您希望在视图之间保留图像信息。通过“查看”,您的意思是不同的HTML页面吗?我想一个更标准的做事方式是:

  • 将文件内容/路径存储在某种状态(例如,redux状态)
  • 使用客户端路由器(例如react-router)在保持状态的同时更改视图

如果您从未使用过客户端路由,它看起来就像(使用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.imagePathconnect函数还会为您的道具添加dispatch功能。

最后,您可以通过在组件中调用来设置路径(但不是渲染函数本身:这将是anti-pattern

props.dispatch( { type: 'SET_PATH', payload: "the_path" } )

最后,很容易在页面之间保持redux状态或使用dedicated middleware进行刷新。

答案 2 :(得分:0)

IndexedDB API非常适合客户端,大文件存储。

Using IndexedDB: MDN

结帐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上