загрузка нескольких изображений по одному с возможностью удаления и изменения с предварительным просмотром - PullRequest
Новая
       5

загрузка нескольких изображений по одному с возможностью удаления и изменения с предварительным просмотром

0 голосов
/ 15 ноября 2018

Я пытаюсь загрузить изображение по одному с опцией изменения и удаления (для каждого загруженного изображения) в многократном просмотре с ответ, клиент apollo .Но с этим я не могу получить ясную мысль о том, как это легко выполнить, и много путаю .. 

Please anyone help me to get rid of this...

**updated**

Привет, сейчас я использую response-dropzonecomponent пока, ноздесь я выполнил многократную загрузку файлов только с возможностью удаления.
Здесь я могу отправить файлы на сервер (узел, используя данные многоэлементной формы), в БД создать файл в конце сервера и сохранить путь в базе данных только с именем пути...Но здесь я не могу показать файлы изображений в передней части по пути, полученному из Back end ... 

const initialState = {
  files: [],
  imagePreviewUrl: []
};

class Image extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = {  ...initialState };  
  }

  componentWillMount() {  
    let {match, data} = this.props;  
    const id = match.params.id && match.params.id.slice(1);  
    if (id) {  
      let currentProduct = (data && data.getProduct) && data.getProduct.find((data) => {
        return data.id == id;  
      });  
      this.setState({
        imagePreviewUrl: currentProduct.images
      });
    }
  }

  handleAdd(file) {  
    console.log(file)  
    var allFiles = this.state.files;  
    allFiles = allFiles.concat([file]);  
    this.setState({
      files: allFiles
    });  
  }  

  handleRemove(file) {  
    let allFiles = this.state.files;  
    this.state.files.forEach((itr, i) => {  
      if (itr.upload.uuid == file.upload.uuid) {  
        allFiles.splice(i, 1)  
      }  
    });  
    this.setState({  
      files: allFiles  
    });  
    console.log(this.state.files, allFiles, file)  
  }   


  render() {  
    let {match, classes, data} = this.props;  
    let {imagePreviewUrl} = this.state;  
    const id = match.params.id && match.params.id.slice(1);  
    var self = this;  
    return (  
      <GridContainer>  
        <DropzoneComponent   
        config={{  
          postUrl: 'no-url',  
          iconFiletypes: ['.jpg', '.png', '.gif'],  
          showFiletypeIcon: true  
        }}  
        eventHandlers=  
        {{   
          addedfile: (file) => this.handleAdd(file),   
          removedfile: (file) => this.handleRemove(file),  
          init: (dropzone) => {  
            console.log(dropzone)  
          }  
        }}  
        djsConfig={{  
          autoProcessQueue: false,  
          addRemoveLinks: true,  
          previewTemplate: ReactDOMServer.renderToStaticMarkup(   
                ...<img data-dz-thumbnail="true" />  ...)}} />  
      </GridContainer>  
    );  
  }  
}  

export default withStyles(style)(Image);
...