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

Posted 2023-02-22

【中文标题】在 React to Express multer 中使用 Antd 上传裁剪的图像

【英文标题】：Upload cropped image with Antd in React to Express multer

【发布时间】：2020-11-17 14:02:57

【问题描述】：

我正在尝试在 React 中使用 Antd upload 上传裁剪后的图像，并使用 multer in express 接收它。 我将图像附加到 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] 

【参考方案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 是使用Antd's Upload 的好教程。

要进一步检查您的问题，您需要发布minimal reproducable example，例如作为Stackblitz。

【讨论】：

好的。但它作为 blob 而不是作为文件发送。 multer 并没有将其视为图像。如何将其作为简单文件而不是 blob 发送？

看看antd upload docs。也许检查transformFile 或customRequest。 simple file是什么格式？

现在我正在使用自定义请求。我的意思是，即使我上传 jpg 图像，它也会发送一个 blob，而不是 jpg 文件

文件不带扩展名发送。有没有办法在 beforeUpload 函数内部修复它？

我正在更改文件名，同时将其附加到 FormData。现在它完美运行！