如何解决Redux表单图片上传和裁剪的状态问题？

问题描述

我在分页时在页面上呈现了一个用户列表。单击编辑按钮可以更改每个用户配置文件。模态有一个图像选择和上传然后裁剪选项。图像选择、裁剪和上传工作正常，但问题是如果我选择一个图像然后关闭模态，然后转到下一个用户它显示相同的图像进行裁剪而不按选择按钮。第二个问题与上传图像后的第一个问题有关。选择任何用户进行编辑都会显示相同的图片。

页面：UserUpdateModal.js：

<AccountProfileForm  
      submitCb={this.updateProfile} 
      errors={errors}
      options={this.options}
      initialValues ={this.props.initialValues}
      randomId={this.randomId()}
 />

页面 AccountProfileForm.js

<Field
    name="first_name"
    type="text"
    label='First Name'
    className='form-control'
    component={BwmInput}
    validate={[required,text,minLength2,maxLength32]}
/>

<Field
    name="image_link"
    id={id}
    type="file"
    label='Image'
    className='form-control'
    component={BwmFileUpload}
/>

这里是要上传的主要类： BwmFileUpload.js

import React from 'react';
import ReactCrop,{ makeAspectCrop } from 'react-image-crop';
import { toast } from 'react-toastify';
import * as actions from '../../../actions';
import { v4 as uuidv4 } from 'uuid';

export class BwmFileUpload extends React.Component {

 constructor() {
  super();

  this.state = {
  src: null,selectedFile: undefined,imageBase64: '',initialImageBase64: '',croppedImageUrl: {},blob:{},pending: false,status: 'INIT',crop: {
    unit: '%',width: 50,aspect: 3 / 4,}
 }
}

imageId=() =>{
 let id = Math.floor(Math.random() * 100) + 1;
 return id;
}

resetToDefaultState(status) {
 this.setState({
  pending: false,status,croppedImage: {},crop: {},imageBase64: ''
 });
}

onSelectFile = e => {
 const selectedFile = e.target.files[0];
 if (e.target.files && e.target.files.length > 0) {
   const reader = new FileReader();
   reader.addEventListener('load',() =>
    this.setState({ src: reader.result,selectedFile })
  );
  reader.readAsDataURL(selectedFile);
 }
};

onCropChange=(crop) =>{
 this.setState({ crop });
}

onImageLoaded = image => {
 this.imageRef = image;
 if (image.naturalWidth > 1920 && image.naturalHeight > 1080) {

  this.resetToDefaultState('INIT');
  toast.error('Max width of an image is 1920px and height 1080px');
  return;
 }
}

onCropComplete = crop => {
this.makeClientCrop(crop);
};
async makeClientCrop(crop) {
 const { selectedFile } = this.state;
 if (this.imageRef && crop.width && crop.height) {
  const croppedImageUrl = await this.getCroppedImg(this.imageRef,crop,selectedFile.name);
  this.setState({ croppedImageUrl });
 }
}


getCroppedImg(image,fileName) {
 const canvas = document.createElement('canvas');
 const scaleX = image.naturalWidth / image.width;
 const scaleY = image.naturalHeight / image.height;
 canvas.width = crop.width;
 canvas.height = crop.height;
 const ctx = canvas.getContext('2d');
 ctx.drawImage(
  image,crop.x * scaleX,crop.y * scaleY,crop.width * scaleX,crop.height * scaleY,crop.width,crop.height
 );

return new Promise((resolve,reject) => {
  canvas.toBlob(blob => {
    if (!blob) {
      //reject(new Error('Canvas is empty'));
      toast.error('Canvas is empty');
      return;
    }
    blob.name = fileName;
    this.setState({blob});
    window.URL.revokeObjectURL(this.fileUrl);
    this.fileUrl = window.URL.createObjectURL(blob);
    resolve(this.fileUrl);
  },'image/jpeg');
 });
}

onError=(error)=> {
 this.setState({pending: false,status: 'FAIL'});
}

onSuccess = (uploadedImage) => {
 const {onChange} = this.props.input || this.props;
 this.resetToDefaultState('INIT');
 onChange(uploadedImage);
 this.setState({src: null,selectedFile:undefined});
}

uploadImage=()=> {
 const { blob } = this.state;
 if (blob) {
  this.setState({pending: true,status: 'INIT'});
  actions.uploadImage(blob,'users').then(
    (uploadedImage) => { this.onSuccess(uploadedImage) },(error) => { this.onError(error)})
 }
}

renderSpinningCircle() {
 const { pending } = this.state;
 if (pending) {
   return (
    <div className='img-loading-overlay'>
      <div className='img-spinning-circle'>
      </div>
    </div>
    )
  }
}

renderImageStatus() {
 const { status } = this.state;
 if (status === 'OK') {
  return <div className='alert alert-success'> Image Uploaded Succesfuly! </div>
}

if (status === 'FAIL') {
  return <div className='alert alert-danger'> Image Upload Failed! </div>
 }
}

render() {
  const {crop,croppedImageUrl,src  } = this.state;
  return (
    <div className='img-upload-container' id={this.imageId()}>
    <label className='img-upload btn btn-bwm'>
     <span className='upload-text'> Select an image </span>
     <input type='file' id={this.imageId()}
            accept='.jpg,.png,.jpeg'
            onChange={this.onSelectFile}/>
    </label>

    { src &&
      <button className='btn btn-success btn-upload'
              type='button' id={this.imageId()}
              disabled={!src}
              onClick={() => this.uploadImage()}>
          Upload Image
      </button>
    }

    { src &&
      <ReactCrop src={src}
                 crop={crop}
                 ruleOfThirds
                 onImageLoaded={this.onImageLoaded}
                 onComplete={this.onCropComplete}
                 onChange={this.onCropChange} />
    }

    { croppedImageUrl &&
      <div className='img-preview-container'  id={this.imageId()}>
        <div className='img-preview' id={this.imageId()}
             style={{'backgroundImage': 'url(' + croppedImageUrl + ')'}}>
        </div>
      
        {this.renderSpinningCircle()}
      </div>
    }

    {this.renderImageStatus()}
  </div>
 )
 }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）