1 结构
<el-form :model="form" label-width="120px" :rules="rules" ref="form">
<el-form-item label="人才姓名" prop="name">
<el-input v-model="form.name" autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="上传附件">
<el-upload
ref="upload"
class="upload-demo"
action="#"
name="files"
:multiple="true"
:show-file-list="true"
:on-remove="handleRemove"
:on-change="handleChange"
:file-list="fileList"
:headers="headers"
:auto-upload="false"
>
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
</el-form>
2 注解
action="#" (必选参数,上传的地址) 上传多文件时文件只是暂存本地,并不需要调上传接口,而是最后和数据一起提交到服务器,这里可以不给action的值,但是组件里必须要写action属性,否下会报错。
name="files" (上传的文件字段名) 组件中默认上传时文件的属性名为file,根据后端要求的字段名进行传值,可以通过name属性更改。
:multiple="true" (设置是否多文件上传)
:show-file-list="true"(是否显示已上传文件列表)
:headers="headers"(设置上传的请求头部)
headers: {
Authorization: 'Bearer ' + getToken() //携带token
}
:auto-upload="false"(是否在选取文件后立即进行上传) 默认值为true自动上传
:on-change="handleChange" (文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用),函数参数为file、fileList,可以获取当前改变的文件和文件列表。
:on-remove="handleRemove"(删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。)
handleRemove(file, fileList){
this.fileList=fileList
},
handleChange(file, fileList) {
this.fileList=fileList
},
3 上传
当有文件和数据一起上传时,常使用FormData构造函数,利用axios把FormData对象发送给服务器
1.首先new FormData(),得到一个FormData对象
2.append(键,值)可以向空白的FormData中追加键值对的数据
3.键 数据项的名字,必须是字符串 , 值 数据项的值,可以是任意类型的数据
this.fileData = new FormData() // new formData对象
if (this.fileList.length === 0) {
} else {
this.fileList.forEach((item) => {
this.fileData.append('files', item.raw)
})
}
this.fileData.append('name', this.form.name)
this.fileData.append('needId', this.id)
this.fileData.append('phone', this.form.phone)
axios({
url:process.env.VUE_APP_BASE_API + "/portal/flexibleAttractApply",
data:this.fileData,
method:'post',
headers: {
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
if (response.code == 200) {
this.$message.success('申请成功')
this.dialogFormVisible = false
}else{
const msg=response.data.msg
this.$message.error(msg)
this.dialogFormVisible=false
}
})
}
4 注意事项
1.向后端传输FormData数据,Content-Type 的类型一定得是 multipart/form-data。
2.上传文件的请求体添加其他参数时必须要添加到FormData。如果请求boby里如果存在非FormData数据类型时,浏览器不会识别数据FormData,Content-Type不会自动添加为multipart/form-data,而是变成了application/json,后端便拿不到文件数据了。
3.这里使用的是原生axios,如果已经封装的axios中Content-Type设置的类型'application/json;charset=utf-8',那么使用原生axios进行FormData数据上传。
4.使用原生axios直接向后端传输数据时,没有使用响应拦截器,注意后端返回msg信息展示。