elementuiform表单手动上传文件以及其他信息

如果你使用的是 ElementUI，那么你可以使用 el-upload 组件来手动上传文件。这个组件包含一个默认的上传按钮，但是你也可以通过设置 show-file-list 属性为 false 来隐藏它。以下是一个简单的例子：
<template>
<el-upload
ref="upload"
action="/your/upload/url"
:show-file-list="false"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button size="small" type="primary">上传文件</el-button>
</el-upload>
</template>

<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 文件上传成功的回调函数
console.log(response);
},
handleError(err, file, fileList) {
// 文件上传失败的回调函数
console.log(err);
},
uploadFile() {
// 手动触发上传
this.$refs.upload.submit();
}
}
}
</script>

上面的代码中，我们设置了 ref="upload"，这样我们就可以通过 this.$refs.upload 来访问 el-upload 组件。然后我们设置了 action 属性为你的上传接口的 URL，同时设置了 show-file-list 属性为 false，这样就隐藏了默认的上传按钮和文件列表。接着，我们分别设置了 on-success 和 on-error 属性来处理文件上传成功和失败的回调函数。最后，我们在 el-button 组件上绑定了 click 事件，这样当用户点击按钮时就会手动触发上传。
除了上传文件之外，你也可以在 el-upload 组件中添加其他的表单元素。以下是一个例子：
<template>
<el-upload
ref="upload"
action="/your/upload/url"
:show-file-list="false"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-input v-model="name" placeholder="文件名称"></el-input>
<el-input v-model="description" placeholder="文件描述"></el-input>
<el-button size="small" type="primary">上传文件</el-button>
</el-upload>
</template>

<script>
export default {
data() {
return {
name: '',
description: ''
}
},
methods: {
handleSuccess(response, file, fileList) {
// 文件上传成功的回调函数
console.log(response);
},
handleError(err, file, fileList) {
// 文件上传失败的回调函数
console.log(err);
},
uploadFile() {
// 手动触发上传
this.$refs.upload.submit();
}
}
}
</script>

上面的代码中，我们在 el-upload 组件中添加了两个 el-input 组件，分别是文件名称和文件描述。这些表单元素的值可以通过 v-model 双向绑定到组件的 data 属性中，这样就可以在上传文件时一起提交到服务器端。