element-ui 上传，http-request覆盖默认的上传行为

最新推荐文章于 2024-06-19 16:02:01 发布
最新推荐文章于 2024-06-19 16:02:01 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37401976/article/details/109597241
版权
本文介绍了如何在Element-UI中使用http-request属性覆盖默认的上传行为，以实现自定义上传逻辑。在使用过程中，需要注意图片预览、校验失败后的文件管理和后台返回的数据格式，通常期望返回图片URL而不是ID。
摘要由CSDN通过智能技术生成

http-request覆盖默认的上传行为

在这里插入图片描述

  1. 添加参数http-request，将原先的action随便填个字符串占位。

在这里插入图片描述

  1. 自定义实现

在这里插入图片描述

注意点：

  • 图片上传的时候，他会先显示到页面上。默认保存在this.$refs.upload.uploadFiles中。对于校验失败的文件，他也会保存起来，所以当校验失败的时候，要手动删除最后一个数据。
  • 对于后台返回的数据，最好能够将图片路径直接返回出来，用于显示
  1. 接口目前先用elementui的。你们要自行替换掉

最低0.47元/天 解锁文章
南柯一梦•浮生尽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-UI快速入门
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
elementUI 上传组件 http-request的注意事项
jkhedge的博客
06-27 6375
elementUI 上传组件 http-request的注意事项
elementUI 上传组件 http-request （覆盖默认的上传行为，可以自定义上传的实现）使用
river、的博客
09-01 4万+
开篇一张图 html代码 <el-dialog title="批量导入" :visible.sync="importDialog" width="30%"> <div class="importDialog-content"> &amp
element plus upload http-request 手动上传 Minio
最新发布
qq_44228286的博客
06-19 1164
element plus upload http-request 手动上传 Minio
element-ui Upload 上传http-request覆盖默认的上传行为
weixin_44764935的博客
07-01 1235
3、auto-upload设置为false之后，我是在 :on-change="changeImageU" ，changeImageU方法里面去主动触发的上传事件。项目配置了反向代理但是上传的时候用action添加地址还是跨域了，所以就用了http-request。1、http-request是官方文档写，是覆盖默认上传行为，所以这个时候action随便设置一个字符串就可以，我设置的 action="string"。auto-upload要设置为false。大概的流程在图上，如有问题请留言。
业务相关，element-ui（el-upload上传）使用http-request自定义上传方式，实现图片的上传，下载，删除
qq_40893035的博客
11-10 5023
本文是自己平时业务需求中的总结，如果你需要借鉴本文，那么你的上传行为应该是： 项目中下载ali-oss依赖，我这里使用的是^6.0.1版本 使用阿里云oss，将图片上传到阿里云，然后阿里云将图片地址返回，我们拿到图片地址，将它传递给后端 本文主要使用this.$refs.upload.uploadFiles，获取到，el-upload上传组件中的默认上传列表，无论上传失败还是成功，都会将图片保存在这里，所以我们只需要对他进行操作，就能实现我们想要的功能 1. 初始化阿里云对象，并获取阿里云token，用于上
element-ui upload图片上传覆盖默认上传行为
YourNikee的博客
10-12 4269
取消默认上传行为，覆盖action上传地址，不影响回显 在项目进行的时候发现element上传组件有很多限制，所以研究了一下则个方法 action是上传组件的必选参数，类型为String，我们可以随意给他一个字符串变量打发了，而通过http-request则可以覆盖默认上传行为，这样我们的问题就解决了； 这是组件应用 <h3>修改默认上传事件/取消action上传限制</h3...
elementui中http-request注意事项
m0_62782752的博客
01-02 1443
5、使用http-request因为action=‘abc’，所以必须最后要统一调接口上传，如果需求是自动上传，且要自定义参数，可以用：data和 :before-upload配合，其中 :before-upload可以自定义参数，before-upload要与auto-upload配合，auto-upload为true才生效。2、:auto-upload=“false” 这个要删掉才能触发http-request方法，因为action="abc"是这样写的，没action中没有包含上传链接。
elementui 上传请求头_Element-ui上传组件http-request用法
weixin_39722759的博客
01-26 2407
概述一般我们在用element-ui上传功能时，有个action属性填写上传图片地址，然后就能运用提供的各种钩子函数处理成功，失败等情况，但有时上传图片发请求时可能要做些特殊处理，比如跨域、特殊参数等，这是就要用到http-request这个方法了用法1.首先要用任意字符覆盖action属性class="image-upload-pic"ref="upload"action="fakeaction...
【JavaScript源代码】element-ui中el-upload多文件一次性上传的实现.docx
12-28
总结起来，实现Element-UI的`el-upload`组件一次性上传多个文件的关键在于利用`FormData`对象来组合所有文件，并通过自定义的`http-request`属性覆盖默认的上传行为。同时，还需要确保在上传前对文件进行必要的验证...
Element-ui DatePicker显示周数的方法示例
10-16
开发者将这些修改提交到了 Element-ui 的 GitHub 仓库，并创建了一个 pull request。虽然尚未合并，但完整的代码可以在指定的 commit 中查看。然而，由于我们通常通过 npm 安装 Element-ui，无法直接修改其源码。...
Element UI - http-request 覆盖默认的上传行为，自定义上传的实现
热门推荐
物联网三分钟
02-02 6万+
结合文章 - 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例 表单中的 ui el-form-item label="课程文件" :label-width="formLabelWidth"> el-upload :show-file-list="false" :file-list
ElementUi 关于 el-upload的自定义上传（http-request）的使用
weixin_52041408的博客
12-12 7670
ElementUi 关于 el-upload的自定义上传（http-request）的使用
ElementUI上传组件，使用自定义上传行为http-request，不显示自带进度条的解决办法(选用axios的onUploadProgress方法)
qq_56018649的博客
09-08 6890
背景： 最近的项目有个上传文件的功能，美工给的设计图和elementUI上传组件差不多，所以想着做起来也比较简单。 功能需求：文件大小判断，文件类型判断，上传显示进度条。 最后完成大概就是这样子： 功能难点： 虽然说组件官网给了很多的例子，但是我项目中自己封装了axios请求，采用了代理服务器解决的跨域问题，所有就没有采用组件本身action，而是选用了http-request进行自定义上传。 这些都比较简单，先上代码...
Element-UI解决跨域上传问题（:http-request）
tangleting的博客
10-30 1995
Element-UI解决跨域上传问题（:http-request） 书写本文的起因是在使用若依前后端分离框架过程中需要进行图片上传的操作，但是本机前端上传的图片是发送给服务器的后端接口，后端接口返回对应的json字符串，涉及到跨域上传问题，这里给出一个解决方案（因为其它设置例如：在配置文件config 里面增加代理的方式、 with-credentials=“true”等没有作用） vue代码 script： 利用XMLHttpRequest实现的数据回传 uploadFile(param) {
实现element ui中upload上传覆盖之前的文件
qq_42341467的博客
06-07 5259
使用ElementUi做头像上传实现多次修改只保留最后一次修改的图片做提交 在使用elementUI的时候发现一个问题，就是在上传文件的时候第二个图片无法将第一张图片覆盖，而是将第二个选择的文件保存在fileList数组中，所以导致注册的时候切换了几次头像就插入几次相同数据到数据库中。 当然可以通过elementUI提供的limit属性进行解决，但是当用户第二次选择文件不会触发onChange方法。无法解决根本问题 我的解决方法是在onChange方法中进行判断，判断fileList长度是否大于1个，大于一
element upload http-request
weixin_30546933的博客
03-28 360
httpRequest: function(param) { var that = this; var form = new FormData(); form.append("file", param.file); if (param.data) { //TODO:附加信息 } // that.$refs.upload....
element ui http-request
07-28
element ui的http-request是一个用于自定义文件上传的函数。在这个函数中，通过参数param可以获取到要上传的文件，可以通过param.file来获取文件对象。在函数中，首先创建一个FormData对象，然后将文件对象添加到FormData中，同时可以添加其他参数。接下来，创建一个XMLHttpRequest对象，使用open方法指定请求的方法和URL，然后通过send方法发送请求。在发送请求之前，可以通过xhr.upload.addEventListener方法监听上传进度。当上传完成后，可以通过xhr.onload方法获取到上传到阿里云的文件地址，并进行相应的处理。\[2\] #### 引用[.reference_title] - *1* *2* [Element UI - http-request 覆盖默认的上传行为，自定义上传的实现](https://blog.csdn.net/m0_37893932/article/details/79237308)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementUI 上传组件 http-request （覆盖默认的上传行为，可以自定义上传的实现）使用](https://blog.csdn.net/qq_39759115/article/details/82287207)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值