4.使用vue的el-upload文件上传，拖拽功能失效

已于 2022-04-08 16:48:17 修改
阅读量3.8k 收藏 3
点赞数 10
分类专栏： 开发遇见的问题(前端) 文章标签： java vue.js mybatis javascript
于 2022-04-08 16:47:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46090071/article/details/124045424
版权

使用vue的el-upload文件上传，拖拽功能失效

解决方案

文件拖拽上传也就是在el-upload组件上加 drag
失效的原因是加了accept（接受上传的文件类型）,把accept删掉,拖拽上传就可以了.
小志会
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-file-upload：vue.js，vue-loader上传文件，vue-file-upload，vue上传文件组件
02-06
Vue文件上传 vue1.x版本可安装vue-file-upload@0.0.7版本vue2.x版本可安装当前最新版本vue.js，vue-loader上传文件，vue-file-upload代码里面包含demo，运行： yarn install && yarn start安装npm npm install --...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
10-18
主要介绍了vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效的解决方法，这里需要主要项目中用的element-ui是V1.4.3，感兴趣的朋友参考下吧
element-ui拖拽上传及问题解决(drag的使用注意事项)
2301_76866366的博客
05-25 2144
element-ui拖拽上传及问题解决,el-upload的drag属性使用过程中宽度问题的解决.........
vue中element-ui中el-upload上传方式使用drag拖拽上传无效
热门推荐
qq_38916157的博客
01-07 1万+
我无效的原因是加了accept（接受上传的文件类型），把accept删除掉了，拖拽上传就好用了。
调用el-upload的方法，实现粘贴图片上传，完全实现与手动/拖拽上传享用同样的样式和功能！
最新发布
qq_43753654的博客
04-03 1912
起初，功能 是手动上传，后来因为不方便就改为，测试的时候，用户感觉前两种方式操作太过麻烦，必须要保存图片到本地才能实现这些操作，说句实在话我感觉也很麻烦，所以就研究使用上传操作。
el-upload拖拽功能失效
呆萌小新@渊洁的博客
10-10 1491
注意vue版本和element-ui版本. 我使用了2.4+的vue2版本.使用最新的element-ui!这个说法不对:因为他只能规定你拖拽的文件格式,他区分大小写.因此拖拽相应文件,大小写均写出即可!其他功能正常,仅拖拽功能有问题.
＜el-upload＞组件拖曳无法上传问题
qq_30409135的博客
04-02 1143
在使用上传组件时发现拖曳上传无反应 经过排查发现 加上这句无法使用拖曳上传 accept=".csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 如果要限制上传文件格式需要在 :before-upload=“beforeUpload” 中校验 ...
el-upload为什么拖拽不起效果，before-upload不执行
小秋的博客
01-11 945
设置的为true,生效了，但是不知道为什么在上传文件的时候不掉取接口正常，调取接口就会上传两遍，一直找不到原因，暂时解决方法： this.$refs["upload"].clearFiles()在调取之前清一下文件，这样就调取一遍了。目前没找到更好的方法，只能先这样。经过排查是因为 auto-upload设置了false，影响到了before-upload不执行，而且http-request也不执行。在做vue后台管理这种项目大部分都会有上传文件的功能，这里用到的是elementUi。
vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEventListener is not a function
weixin_49562833的博客
02-20 1154
vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEventListener is not a function
关于element-ui的upload组件的drag功能失效的原因
qq_41083105的博客
12-06 2539
element-ui的drag功能失效
vue+axios+el-upload实现文件上传（带参数）：
01-03
本次使用http-request自定义文件上传： 上传头像 备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media ...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-upload-component-Vue上传组件，多文件上传，上传目录，拖动上传，拖动目录。 支持Vue> = 2.0-Vue.js开发
05-27
vue-upload-component Vue.js file upload component The component is just a button Multi-file upload Upload directory Drag upload Drag the directory Upl vue-upload-component Vue.js file upload ...
vue-upload-component：Vue.js文件上传组件，多文件上传，上传目录，拖动上传，拖动目录，同时上传多个文件，html4（IE 9），`PUT`方法，自定义过滤器
02-06
Vue.js文件上传组件该组件只是一个按钮 多文件上传 上传目录 拖动上传 拖动目录 同时上传多个文件 html4（IE 9） PUT方法 自定义过滤器 缩图 块上传 例 安装 npm install vue-upload-component --save ...
解决Vue项目中使用element-ui组件中el-upload上传图片失败的问题
nicole27ll的博客
11-22 7142
使用element-ui组件库中的el-upload上传图片，token报错等的相关处理
el-upload上传图片时，本地可以正常，打包后不正常
m0_67944812的博客
11-14 152
本地使用的时候有预览图标，打包部署后，预览图标不显示了，不知道哪里出问题，请各位大佬指点。
ElementUI图片在Dialog中上传不回显问题
Macao7_W的博客
09-29 1460
ElementUI图片在Dialog中上传不回显问题
关于el-table使用、layout简单布局和el-upload拖拽样式修改
qq_54381639的博客
07-29 2988
最近做的vue+elementUI的前端项目开发，分享下遇到了一些关于饿了么组件样式调整的问题以及最终解决方式，希望能帮得到正在眉头紧蹙的你
element ＜el-upload＞ 组件上传细节（可拖拽）
weixin_48870945的博客
03-31 540
组件配置代码 请求头 以及 接口链接 action 配置 直接请求，默认参数名为：file
vue el-upload实现上传文件到后台的功能
06-09
`el-upload` 是 `ElementUI` 组件库中的一个组件，用于实现文件上传功能。它支持多文件上传、拖拽上传等功能，使用起来非常方便。以下是一个简单的示例： ```html <template> <div> <el-upload action="/api/upload" :data="{token: 'xxxxx'}" :on-success="handleSuccess" :on-error="handleError" :multiple="true" :limit="3" :accept="'image/*'" ref="upload" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3个文件</div> </el-upload> </div> </template> <script> export default { methods: { handleSuccess(response, file, fileList) { console.log(response) console.log(file) console.log(fileList) }, handleError(error, file, fileList) { console.log(error) console.log(file) console.log(fileList) } } } </script> ``` 上面的代码中，我们将 `el-upload` 组件的 `action` 属性设置为上传文件的后端接口地址，`data` 属性设置为上传时需要携带的参数，`on-success` 和 `on-error` 属性分别绑定了上传成功和上传失败的回调函数。`multiple` 属性表示是否支持多文件上传，`limit` 属性表示最多上传的文件数，`accept` 属性表示接受的文件类型。我们还使用了 `ref` 属性来获取到 `el-upload` 组件的引用，方便在其他方法中操作上传组件。 在上面的示例中，我们定义了 `handleSuccess` 和 `handleError` 两个方法来处理上传成功和上传失败的情况。在上传成功时，我们可以通过 `response` 参数获取到服务器返回的数据，`file` 参数表示当前上传的文件，`fileList` 参数表示当前已经上传的文件列表。在上传失败时，我们可以通过 `error` 参数获取到错误信息。 需要注意的是，以上示例只是前端实现上传文件的功能，你还需要在后端编写相应的代码来处理上传请求，将上传的文件保存到服务器上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值