标签：sel width tab idt res 经典 type=file ons his
今天写一个文件上传的功能，开始想用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 提交。
标签：sel width tab idt res 经典 type=file ons his
原文地址：https://www.cnblogs.com/xhc123/p/10045716.html
