vue文件上传

Posted 2021-01-23 xhc123

今天写一个文件上传的功能，开始想用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 提交。