vue中element 上传功能的实现思路

前端之家收集整理的这篇文章主要介绍了vue中element 上传功能的实现思路前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

element 的上传功能

最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传

看完文档后,感觉有两种思路可以实现

before-upload auto-upload,on-change

before-upload

初始代码

// javscript data() { return { imageUrl: "" }; },methods: { handleAvatarSuccess(res,file) { this.imageUrl = URL.createObjectURL(file.raw); },beforeAvatarUpload(file) { // 文件类型进行判断 const isJPG = file.type === "image/jpeg"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error("上传头像图片只能是 JPG 格式!"); } if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 2MB!"); } return isJPG && isLt2M; } }

初始效果

考虑在before-upload中进行弹窗后, return false | reject() 即可

修改代码

由于 this.$confirm 是异步操作,因而需要等待其结果才能进行下一步操作

{ return true }).catch(() => { return false }); console.log(isSubmit) return isSubmit; }

确认提交和取消提交 ==> 结果却一样

确认提交

取消提交

结果却不可以,因而考虑另一种思路了,before-upload 只是进行判断文件是否适合,从而是否上否上传到服务器,而不是用来等待用户进行操作使用的

手动上传

上传 // js data() { return { fileList: [ ],bool: true } },methods: { handleRemove(file,fileList) { console.log(file,fileList); },handlePreview(file) { console.log(file); },handleError(err,file) { alert('失败') this.fileList = [] },handleSuccess(res,file) { alert('成功') this.fileList = [] },handleExceed(files,fileList) {},async handleChange() { const isSubmit = await this.$confirm('此操作将永久删除文件,{ confirmButtonText: '确定',type: 'warning' }).then(() => { return false }).catch(() => { return true }); if (isSubmit) { this.$refs.upload.submit() } else { this.fileList = [] } } }

确认提交

取消提交

方法可行,现在就是控制因为文件状态改变而导致两次弹窗,修改如下

文件状态变更 不是成功就是失败,因而在成功失败的函数进行控制即可

添加flag标识进行控制弹窗即可

{ return false }).catch(() => { return true }) if (bo) { this.$refs.upload.submit() this.isConfirm = false } else { this.fileList = [] } }

修改后便可以了,只是注意 在 on-error 和 on-succes 中注意清空 fileList = [] ,这样还可以重新添加文件

确定上传

取消上传

总结

以上所述是小编给大家介绍的vue中element 的上传功能的实现思路。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31647.html

猜你在找的Vue相关文章