【前后端】前端向后端传递文件参数并携带其他参数

一、问题背景

       最近在进行某实训，我们的选题涉及到了上传文件的问题，并且在上传文件的同时还要携带其他相关的参数。以我们所做的系统为例：某公司购入一台新车，该车在录入系统时，我们需要向后端上传车辆的图片，同时还需要传递车牌号、车型、座位数这些参数。那么我们如何将文件参数以及其他参数一同传递给后端。经过查阅，作者找到了一种解决办法。

二、问题解决

1.前端如何将用户上传的图片作为参数传递给后端？

       此处我使用的是ElementUI中的上传文件组件Upload，该组件的原始代码如下：

       可以看到这其中有一些事件处理函数，如on-success、before-upload，而我这里没有使用这些函数，而是在其中添加了一个on-change的事件处理函数，这个函数会在用户选择文件或上传文件时被调用，传递相关参数和数据，允许你在处理上传文件的过程中执行一些自定义逻辑。我为其绑定了一个名为handleAddCarChange的函数，修改后的Upload组件代码如下：