element 不立即上传 (自定义上传)
<el-form-item label="选择文件:">
<el-upload
class="upload-demo"
action="#"
:on-change="onChange"
:show-file-list="false"
multiple
:auto-upload='false'>
<div class="up-btn">
<img src="@/assets/images/dialog/broadSystem/up-load.png" alt="">
<span>点击上传</span>
</div>
</el-upload>
<div class="file-list" v-for="(v,i) in fileList" :key="i">
<img src="@/assets/images/dialog/broadSystem/gl.png" alt="" class="gl">
<span class="file-name">{{v.name}}</span>
<img src="@/assets/images/dialog/broadSystem/gb.png" alt="" class="gb" @click="delFile(i)">
</div>
</el-form-item>
<div class="button" @click="submit">确定</div>
业务需求是在点击确定按钮之后再进行文件上传,所以需要设置auto-upload为false,它会让element上传组件取消选取文件后立即上传。在这里我们可以使用组件中on-change事件来获取选取的文件,代码如下:
onChange(file,fileList){
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
//这里我需要上传mp3文件,所以做了限制
const extension = testmsg === 'mp3'
if(!extension) {
this.$message({
message: '上传文件只能是mp3格式!',
type: 'warning'
});
return
}
//将选取的文件拿到,这里需要根据自己业务来写
this.fileList[0] = file
},
拿到获取的文件之后我们在写提交上传的方法:
submit(){
//业务的一些校验
if(!this.gid){
this.$message.warning('请选择分类');
return
}
if(this.fileList.length==0){
this.$message.warning('请上传文件');
return
}
//自定义上传
const form = new FormData();
//将选取的文件插入formdata中
form.append("file", this.fileList[0].raw);
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
//调用上传接口
upload(form,this.gid,this.token).then(res=>{
loading.close();
if(res.result==200){
this.$message.success('上传成功');
this.isShow = false
this.$parent.getMusicList()
}
}).catch(err=>{
console.log(err)
loading.close();
this.$message.error('上传失败');
})
},