上传文件的控件，用element-ui 的uplaod
<el-upload
drag
action
:on-change="handleChange"//当改变的时候，触发的事件
:show-file-list="false"//是否显示所传递的文件列表
:http-request="handleUpload"//覆盖默认的上传行为
>
<el-button size="mini" class="import-button">
<img src="../images/daoru.png" class="daochu-icon" />导入
</el-button>
<div class="el-upload__text">点击或将文件拖到这里上传</div>
</el-upload>vue部分：先获取到 file文件的属性，同时用创建空的formdata数据，添加对象
let file = event.target.files
let formData = new FormData()
formData.append('category', 'settingPic')
formData.append('file', file[0])
console.log(formData);
最后一步：上传文件 axios的post方法上传文件,注意请求头设置，headers:{'Content-Type':'multipart/form-data'}
this.$axios({
method: "POST",
url: url_g + '/dcas/event/'+this.contrastId+'/importathlete',
data: formData
}).then((res) => {
});这就完成了文件上传。
如果是表格数据和文件一起上传，需要把input框的数据，用formdata的append方法都添加到fomedata的对象里。
0
联系我
0条评论