今天写一个文件上传的功能，开始想用element-ui的组件写，但是发现不知道怎么把文件标题和内容一起上传，所以用了经典的input框上传。
废话不多说，直接上代码。
这是表单：
<el-form :model="fileForm" :rules="rules" ref="fileForm" label-width="80px"> ?????????????<el-form-item label="标题" prop="title"> ???????????????<el-input v-model="fileForm.title" placeholder="请输入标题"></el-input> ?????????????</el-form-item> ?????????????<el-form-item label="内容" prop="msg"> ???????????????<el-input type="textarea" v-model="fileForm.msg" placeholder="请输入信息"></el-input> ?????????????</el-form-item> ?????????????<el-form-item label="选择文件" prop="file"> ???????????????<el-input type="file" v-model="fileForm.file"></el-input> ?????????????</el-form-item>
</el-form>
点击上传按钮提交请求：
var formData = new FormData() ???????????var file = document.querySelector(‘input[type=file]‘).files[0] ???????????formData.append(‘file‘, file) ???????????formData.append(‘bucketname‘, ‘bbfe‘) ???????????formData.append(‘title‘, this.fileForm.title) ???????????formData.append(‘msg‘, this.fileForm.msg) ???????????this.$axios.post(‘/bbfe/s3/file‘, formData).then((res) => { ?????????????if (res.data.code === 1) { ???????????????this.$message.success(‘上传成功！‘) ???????????????this.$refs.fileTable.getFileList() ?????????????} else { ???????????????this.$message.error(‘上传失败！‘) ?????????????} ?????????????this.dialogVisible = false ???????????}).catch((err) => { ?????????????console.log(err) ???????????})提交时是把formData传给后台，不是把 fileForm 提交。
vue文件上传
原文地址：https://www.cnblogs.com/xhc123/p/10045716.html