javascript - 如何在 Next.js API 的后端上传图片？

Question

我正在使用带有 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"})
        }
    }      
}

标签： javascriptnode.jsnext.js