el-form中上传附件
时间: 2024-03-28 17:28:32 浏览: 133
在el-form中上传附件的方法如下所示:
首先,你需要在el-form组件中添加一个el-form-item元素,用于显示附件上传的标签和控件。如下所示:
```html
<el-form-item label="附件" prop="accessorList">
<el-upload v-model="form.accessorList" style="display: inline-block;float: left;" :action="uploadUrl" :on-success="handleFileSuccess" :on-remove="handleFileRemove" :on-error="handleFileError" :file-list="fileList" :on-preview="handlePreview" :multiple="false" :limit="5">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
```
其中,v-model绑定了表单中的附件列表,uploadUrl指定了文件上传的后端接口地址。file-list则是用于回显已经上传的文件列表。
接下来,你需要在data属性中定义fileList和uploadUrl,如下所示:
```javascript
data() {
return {
fileList: [], // 上传文件列表
uploadUrl: `${process.env.VUE_APP_BASE_API}/equipment/upload`,
}
},
```
这样,当用户选择上传附件时,el-upload组件会将选中的文件添加到fileList中,并通过uploadUrl将文件发送到后端进行处理。
总结一下,以上就是在el-form中上传附件的方法,注意要正确配置el-form-item和el-upload组件,并在data中定义好fileList和uploadUrl即可。
阅读全文