### 实现 Vue 中 Form 表单文件上传 为了实现在 Vue 应用程序中通过 `el-form` 和 `el-form-item` 组件来完成文件上传功能，下面提供了一个完整的解决方案。 #### HTML 结构定义 在 `<template>` 部分定义了用于展示表单项以及触发文件选择器的结构。这里利用了 Element Plus 的 `el-form` 及其子组件 `el-form-item` 来构建用户界面[^1]： ```html <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon> <el-form-item label="上传图片" prop="productimagesrc"> <!-- 文件输入框 --> <input @change='changeImg' id='imgFile' type='file'/> <!-- 显示已上传或预览图像 --> <img v-if="form.productimagesrc" style="width: 200px;height: 200px;" :src='form.productimagesrc' alt="Preview"/> </el-form-item> </el-form> ``` #### JavaScript 方法编写 接下来是在脚本部分处理文件变化事件并准备发送给服务器的数据逻辑。当选择了新的文件时会调用 `changeImg()` 函数更新视图中的图片路径，并准备好待上传的内容: ```javascript methods:{ changeImg(event){ const file = event.target.files[0]; // 创建对象URL以便即时显示所选图片 this.form.productimagesrc = URL.createObjectURL(file); // 将实际文件存入data()内的form对象里等待后续操作 this.form.file = file; }, submitForm(){ let formData = new FormData(); // 添加其他字段... formData.append('image', this.form.file); axios.post('/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }).then(response => { console.log("Upload successful!"); }); } } ``` 上述代码片段展示了如何捕获文件改变事件并将选定的文件转换成可以在浏览器内立即查看的形式；同时也包含了提交整个表单至后端接口的过程[^2]。 #### 关闭自动上传设置 为了避免文件一旦被选取即刻上传的行为，默认情况下应关闭此行为。这可以通过配置属性 `auto-upload=false` 来达成目的，从而允许开发者控制何时真正发起HTTP请求向服务端传送资料。 ```html <!-- 禁止自动上传 --> <el-upload class="upload-demo" action="" :auto-upload="false"></el-upload> ```