react-dropzone 图像在上传时旋转答案

【问题标题】：react-dropzone image rotate on uploadreact-dropzone 图像在上传时旋转
【发布时间】：2020-03-20 13:34:58
【问题描述】：

我在 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。

【问题讨论】：

我认为轮换问题与您的 React 应用程序没有任何关系。 check this out
你的资源真的很有帮助，非常感谢！！

标签： reactjs image react-native image-rotation react-dropzone

【解决方案1】：

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

【讨论】：

感谢您的帮助，我终于使用了compress.js，效果很好。