Question

我对react-dropzone上传图片有问题。当我用手机上传图片时，有些图片会旋转，我不明白原因。

这里是图片格式代码：

[['1', '1', '4.59114', '0.366832', '-9.56424'], ['2', '1', '5.24742', '-0.870574', '-8.40649'], ['3', '2', '5.21995', '-0.38856', '-7.39145']]

这里是图像预览代码：

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>
    );
  };

非常感谢您！

PS：不用关心“ field.id”，我只是为每张图像添加一个ID。

Answer 1

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

react-dropzone图片在上传时旋转

1 个答案: