el-form上传
时间: 2023-07-02 17:10:28 浏览: 96
el-form 可以通过 el-upload 组件来实现文件上传功能。
首先,需要在 el-form 中定义一个 el-upload 组件,如下所示:
```html
<el-form ref="form" :model="formData">
<el-form-item label="上传文件">
<el-upload
class="upload-demo"
action="/your/upload/url"
:on-success="handleSuccess"
:limit="1"
:file-list="fileList">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" v-if="fileList.length > 0" @click.prevent="submitForm('form')">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
```
在上述代码中:
- `el-upload` 组件的 `action` 属性指定了上传文件的地址;
- `el-upload` 组件的 `:on-success` 属性指定了上传成功后的回调函数;
- `el-upload` 组件的 `:limit` 属性指定了上传文件的数量限制;
- `el-upload` 组件的 `:file-list` 属性绑定了上传的文件列表;
- `el-upload` 组件内部包含了两个按钮,一个用于选择文件,一个用于提交表单,并且提交表单的按钮只有在有文件上传时才会出现。
接着,在 Vue 实例中定义 `formData` 和 `fileList` 数据,并且编写 `handleSuccess` 和 `submitForm` 方法,如下所示:
```javascript
export default {
data() {
return {
formData: {
// 其他表单数据
},
fileList: [],
};
},
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后的处理
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$refs[formName].$el.submit();
} else {
return false;
}
});
},
},
};
```
在上述代码中:
- `formData` 对象用于存储表单数据;
- `fileList` 数组用于存储上传的文件列表;
- `handleSuccess` 方法在上传成功后会被调用,可以在该方法中处理上传成功后的回调逻辑;
- `submitForm` 方法用于提交表单,只有在表单验证通过且有文件上传时才会提交表单。
最后,需要在后端实现文件上传的接口,在接口中获取上传的文件并保存到指定的位置。具体实现方式因后端语言和框架不同而异,这里不做过多讲解。
阅读全文