如何在 Next.js API 的后端上传图片？答案

【问题标题】：How can I upload images in backend in Next.js API?如何在 Next.js API 的后端上传图片？
【发布时间】：2022-03-29 05:53:58
【问题描述】：

我正在使用带有 API 的 Next.js。我想使用 API 后端上传两个文件并添加一个输入文本字段。我尝试过，但找不到在后端上传具有不同字段和一个输入文本字段的文件的解决方案。如何保存从我的桌面或个人电脑上传的图片（不是图片链接）

const Information = () => {
    const [institute_logo, setInstitute_logo] = useState('');
    const [institute_about_head, setInstitute_about_head] = useState('');
    const [institute_about_upload, setInstitute_about_upload] = useState('');
                                              
    const Info = async (e) => {
        e.preventDefault();
        axios.patch(`/api/institute/Information/${Id}`, {
            institute_logo,
            institute_about_head,
            institute_about_upload   
        }            
    }
                    
    return (   
        <div>
            <form onSubmit={Info}>
                <input 
                    type="file"
                    id="institute_logo"
                    name="institute_logo"
                    placeholder="Upload Image" 
                    className='shadow appearance-none border-gray rounded w-1/2 py-2 px-3 leading-tight focus:outline-none focus:shadow-outline'
                    onChange={logo}
                />
                <div className='mt-2 flex flex-col'>
                    <label htmlFor="institute_about_head" className='font-medium'>Main Heading</label>
                    <input 
                        type="text" 
                        id="institute_about_head"
                        name="institute_about_head"
                        placeholder="About Us" 
                        className='border-2 border-gray-light rounded w-3/4 pl-1.5 h-9 mt-1'
                        onChange={(e) => setInstitute_about_head(e.target.value)} 
                    />
                </div>
                <div>
                    <input 
                        type="file"
                        id="institute_about_upload" 
                        name="institute_about_upload"
                        placeholder="Upload Image" 
                        className='border-2 border-gray-light rounded w-3/4 pl-1.5 h-9 mt-2 shadow appearance-none' 
                        onChange={(e) => setInstitute_about_upload(e.target.value)}
                    />
                </div>
            </form>
        </div>
    )
}
                
export default Information;

API 后端

export default async function handler(req, res) {
    let {Id} = req.query;
    if (req.method === 'PATCH') {
        let {
            institute_logo, 
            institute_about_upload, 
        } = req.files
                    
        let {
            institute_about_head
        }  = req.body;
                        
        const payload = {
            institute_about_head
        }
                            
        let instituteAdditionalData = await institute.findOneAndUpdate({ _id: instituteId }, payload, { new: true }).lean();
        if (instituteAdditionalData) {
            res.status(200).json({Message:"Institute Details updated successfully"})
        }
    }      
}

【问题讨论】：

标签： javascript node.js next.js

【解决方案1】：

我不知道你是否还需要答案，但我遇到了类似的问题，在这里找到了答案

https://codesandbox.io/s/thyb0?file=/pages/index.js

注意：请确保安装具有确切版本号的软件包。 Formidable 必须是 1.2.2 版才能正常工作。 (npm install formidable@1.2.2)

如果你使用的是最新版本，就不会如代码所示那样工作。

它解决了图片上传的问题，但一定要尝试看看它在最新版本中是如何工作的。

希望这会有所帮助！

【讨论】：