Element UI 图片上传功能踩坑

样式效果：

 <el-uploadmultipledragclass="upload-demo":headers="token"action="http://127.0.0.1:8888/api/private/v1/upload":on-preview="handlePreview":on-remove="removeImg":before-remove="handleRemove":on-success="uploadOk":before-upload="beforeUpload"list-type="picture"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过1MB</div></el-upload>

功能介绍：拖动上传，点击上传

踩坑点：

1：必须在请求头中提供 token 令牌

解决方法: 绑定 :headers="token"

// data中设置请求头的token

token: { Authorization: sessionStorage.getItem("token") },

2：我们在用户删除要用户确认是否删除时，采用了 element ui 的messageBox组件，想通过return flase的方式取消删除的话，就会出问题，如下图

我们点击删除图片，会发现图片已经被删除，before-remove这个钩子没有起作用 ，这是因为 :on-remove(文件列表移除文件时的钩子) 会调用这个 before-remove 这个钩子里的函数，而我们的 messageBox组件是异步的，返回的是promise对象，promise对象里的情况

而 berfor-remove钩子说的很清楚，只有当返回 false ，或者返回的promise 为 reject时，才停止删除

这里推荐两种解决办法，第一种是不用messageBox组件，直接用js内置的 confim() 实现，虽然样式普通了点，但无伤大雅

另一种使用是 messageBox组件来询问用户是否确认删除图片，方式直接返回这个 promise对象

// 文件列表移除文件之前的钩子handleRemove(file) {if (file.status === "success") {return this.$confirm(`是否删除${file.name}?`);}},

这样，取消返回空=false，确认删除返回一个promise对象=true。就好了

Element UI 图片上传功能踩坑相关推荐

element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...
element ui 图片上传_游民晚播报：PS5手柄续航情况测试 UI界面概览放出
各位朋友晚上好,现在为您带来今天的晚间播报.一起来回顾一下今天白天游戏圈内外都有哪些要闻.趣闻. 要闻回顾: 1.PS5 DualSense手柄续航情况触觉反馈密集游戏更耗电新闻原文:点击查看 P ...
ckeditor5图片上传功能的使用
如果想使用ckeditor5中的图片上传功能,就无法在项目中通过npm的方式来安装ckeditor,而是需要在https://ckeditor.com/ckeditor-5/online-builde ...
百度编辑器图片上传功能解疑
最头疼的上传图片问题版本选择和自定义配置项目中使用了百度编辑器ueditor,这里是官网链接,效果还算不错,使用中的一些经验,分享在这里. 我使用的环境是.NET MVC3 最头疼的上传图片问题 ...
element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...
php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在最后将核心代码 ...
人人网的相册里图片上传功能是怎样实现的
大侠们,给我讲解下类似于人人网的相册里,图片上传功能是怎么实现的,它可以批量上传.我的想法是实现一个批量上传图片的功能,1.可以让用户同时选择多个图片上传.2.上传后会显示出来,并且可以单独对某张图进 ...
「VUE架构」VUE2.0 图片上传功能（移动端）
本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签由于我们是通过input标签的 ...

Element UI 图片上传功能踩坑

而 berfor-remove钩子说的很清楚，只有当返回 false ，或者返回的promise 为 reject时，才停止删除

Element UI 图片上传功能踩坑相关推荐

最新文章

热门文章