react-dropzone图像上传时旋转

Question

我有一个关于react-dropzone上传图片的问题。当我用手机上传图片时，有些图片会旋转，我不明白其中的原因。

下面是图像表单代码：

export const ImageDropZone = ({ input, fetching, handleOnDrop, isImageUploading, handleRemoveImage, imagefile, libelle, meta: { touched, error, warning }, ...field}) => {
    if(fetching || isImageUploading){
      return(
        <div id="post-single-page">
            <Spinner/>
        </div>
      )
    }
    return (
      <div className={classnames("form-group", { "has-error": touched && ((error || warning)) })}>
      {imagefile 
                ? (<ImagePreview className="dropzone undashed" onChange={input.onChange} imagefile={imagefile} id={field.id} handleRemoveImage={handleRemoveImage} />) 
                :
        (<Dropzone
          name={input.name}
          className="dropzone"
          onChange={file => input.onChange(file)}
          onDrop={file => handleOnDrop(file, input.onChange, field.id)}
          accept="image/jpeg, image/png, image/gif, image/bmp"
          multiple={false}
          >
          <div className="instructions"><i className="fas fa-cloud-upload-alt fa-3x"  /><p>Cliquez ici ou glissez/déposez une image.</p></div>     
        </Dropzone>)}
        {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    );
  };

图片预览代码如下：

class ImagePreview extends Component {

    render() {
        const {handleRemoveImage, id, onChange, imagefile } = this.props
        if(imagefile.mediaObject) {
          imagefile.preview = `/uploads/media/${imagefile.mediaObject.filePath}`;
          imagefile.name = imagefile.mediaObject.name
        }
        const { preview, name} = imagefile;
        return (
          <div className="render-preview">
            <div className="image-container">
              <div 
                onClick={() => handleRemoveImage(onChange, id)}
                className='delete'
              >
                <FontAwesomeIcon icon={faTimesCircle} size='2x' />
              </div>
              <img src={preview} alt={name} />
            </div>
          </div>
        )
    }    
}

非常感谢！

PS:我不关心"field.id"，我只是为每个图像添加了一个ID。

Answer 1

我在移动设备上上传图片时也遇到了同样的问题。这不是React的问题，而是图像的方向问题。您需要在上传后对图像进行处理，并更改方向。我使用exif-js和this堆栈溢出的答案真的很有帮助。