在 React to Express multer 中使用 Antd 上传裁剪后的图像

Question

我正在尝试在 React 中使用 Antd upload 上传裁剪后的图像，并在 express 中使用 multer 接收它。我将图像附加到 formData，然后使用 axios 将其发布。但是 multer 字段是空的。我在简单的文件上传中没有遇到任何问题。但是不能用antd上传管理。

这是我的 React 代码： API 是设置axios。它无处不在。

export default class Upload extends Component {

    constructor(props) {
        super(props)
        this.state = {
            avatar: [],
            loading: true
        }
        this.onChange = this.onChange.bind(this)
    }

onChange(e) {
    let formData = new FormData()
    formData.append('avatar', e.file)
    API.post('/account/avatar', formData, config)
        .then(res => {
            console.log(res.data)
        })
    console.log(e.file)
}

   render() {
        return (
                        <ImgCrop shape='round'>
                            <Upload
                                action={this.onChange}
                                multiple={false}
                                showUploadList='false'
                                onChange={this.onChange}
                            >
                                <Button className='upload-avatar-btn'><i className='lnir lnir-pencil'></i></Button>
                            </Upload>
                        </ImgCrop>
       )
}

在浏览器的控制台中记录 e.file 是这样的：

{lastModifiedDate: 1595920324076, name: "anders-jilden-tcEGBIHm_6E-unsplash.jpg", uid: "rc-upload-1595919951039-2", lastModified: undefined, size: 70585, …}
lastModified: undefined
lastModifiedDate: 1595920324076
name: "anders-jilden-tcEGBIHm_6E-unsplash.jpg"
originFileObj: Blob {lastModifiedDate: 1595920324076, name: "anders-jilden-tcEGBIHm_6E-unsplash.jpg", uid: "rc-upload-1595919951039-2", size: 70585, type: "image/jpeg"}
percent: 100
size: 70585
status: "uploading"
type: "image/jpeg"
uid: "rc-upload-1595919951039-2"
__proto__: Object

快递编码：

.post('/avatar', upload.fields([{ name: 'avatar', maxCount: 1 }]), (req, res) => {
    const files = req.files.avatar;
    console.log(req.files);
    console.log(req.files.avatar)
    res.send('Uploaded');
})

我在客户端收到 200 状态码。但是 multer 没有上传任何东西。我不知道该怎么做。 console.log(req.files) 给出了这个：

[Object: null prototype] {}

Answer 1

首先尝试等到通过 e.file.status === 'done' 完成上传。

之后您可以使用 e.file.originFileObj.

上传原始文件对象

例如：

onChange(e) {
    if (info.file.status === 'done') {
        let formData = new FormData()
        formData.append('avatar', e.file.originFileObj)
        API.post('/account/avatar', formData, config)
           .then(res => {
               console.log(res.data)
           })
       console.log(e.file)
   }
}

这个CodeSandBox is good tutorial for using Antd's Upload.

要进一步检查您的问题，您需要 post minimal reproducable example e.g. as Stackblitz。

在 React to Express multer 中使用 Antd 上传裁剪后的图像

Upload cropped image with Antd in React to Express multer

file-upload

express

reactjs

multer

antd