1

我正在使用 React Dropzone 进行文件上传。然后我生成 S3 putObject signedURL 并使用 axios 将图像发送到 S3。

它看起来像这样：

const {getRootProps, getInputProps} = useDropzone({
  onDrop: (acceptedFiles) => {
    const image = acceptedFiles[0]

    getS3SignedUrl(...)
      .then(path => {
        const options = {...}

        //????

        return axios.put(path, image, options)
      })

  }
})

一切正常，但图像非常大。我想减少图像的宽度/高度，将其缩小，并可能在将其发送到 S3 之前降低质量。

我看了一些类似的问题，但我不知道什么是最好的 lib/ 方法。

有人可以帮我举个例子吗？

4

3 回答 3

1

您可以使用react-imgpro库。以及下面如何使用。

import React from 'react';
import ProcessImage from 'react-imgpro';

class App extends React.Component {
  state = {
    src: '',
    err: null
  }

  render() {
    return (
      <ProcessImage
        image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'
        resize={{ width: 500, height: 500 }}
        colors={{
          mix: {
            color: 'mistyrose',
            amount: 20
          }
        }}
        processedImage={(src, err) => this.setState({ src, err})}
      />
    )
  }
}

处理后的图像将存储在状态中。

于 2019-06-26T09:34:55.330 回答
0

您可以使用react-image-file-resizer包。

如何使用：

首先，包装这个调整器：

const resizeFile = (file) => new Promise(resolve => {
    Resizer.imageFileResizer(file, 300, 300, 'JPEG', 100, 0,
    uri => {
      resolve(uri);
    },
    'base64'
    );
});

然后在你的异步函数中使用它：

const onChange = async (event) => {
    try {
        const file = event.target.files[0];
        const image = await resizeFile(file);
        console.log(image);
    } catch(err) {
        console.log(err);
    }
}
于 2021-01-14T11:02:01.117 回答
0

Cloudinary 具有强大的功能，包括您想要的。您所要做的就是使用 SDK，然后将图像连同参数一起发送到那里调整图像大小，并将处理后的图像 URL 与图像一起返回并存储在您的 cloudinary 帐户的云中。我真的很依赖 Cloudinary，特别是 NodeJS SDK。您可以查看 ReactJS 的 SDK 文档。 https://cloudinary.com/documentation/react_integration

于 2019-06-27T00:39:10.990 回答