element-ui多张图片或文件上传,改变【el-upload】默认多次上传方法
在使用elemen-ui中el-upload组件多张图片或者文件上传时,它默认为几个文件上传几次,单文件上传,但我们需要一次上传多张时,就需要自定义上传方法http-request (特别要注意的是,当我们使用此方法时,需要关闭自动上传功能 auto-upload)一 定义自定义上传功能重新定义方法为‘uploadFile’二 定义FormData作为参数载体data三 定义自定义上传事件注意up
·
在使用elemen-ui中el-upload组件多张图片或者文件上传时,它默认为几个文件上传几次,单文件上传,但我们需要一次上传多张时,就需要自定义上传方法http-request (特别要注意的是,当我们使用此方法时,需要关闭自动上传功能 auto-upload)
一 定义自定义上传功能
<el-upload
:headers="myHeaders"
ref="upload"
:action=" URL"
list-type="picture-card"
:auto-upload="false"
:on-change="onChangeImg"
:on-success="succeImg"
:on-remove="removeImg"
:file-list="imgListes"
:http-request="uploadFile"
:limit="5"
>
重新定义方法为‘uploadFile’
二 定义FormData作为参数载体data
data(){
return{
formDate:"",//载体
}
}
三 定义自定义上传事件
注意uploadFile()方法,这是我们覆盖的上传方法。我猜测在我们触发开始上传文件事件( this.$refs.upload.submit())后,组件会遍历当前文件列表的的文件,并调用上传(uploadFile())方法,在(uploadFile())方法里会传入一个file参数:
只要在每次调用uploadFile()方法里把遍历到的文件append()到FormData里面,然后再在上传按钮的事件里将“装载”好的FormData对象作为参数发送到服务端就好了
methods:{
uploadFile(file){
//参数file文件就是传入的文件流,添加进formDate中
this.formDate.append('file', file.file);
}
}
四,上传
handelConfirm(){
this.formDate = new FormData();//初始化定义
this.$refs.upload.submit();
//当然这里也可以定义到api接口文件里面 方便管理,路径后也可以拼接数据id等参数
request.post( '上传的url'+'?id='+this.ids, this.formDate).then( res => {
console.log("成功")
}).catch( res => {
console.log(res)
})
}
到这里就完成啦!!!!
更多推荐
所有评论(0)