使用element的upload组件自定义上传http-request

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量547 收藏
点赞数 3
分类专栏： 前端文件处理上传下载 文章标签： 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiurikeai/article/details/137118673
版权

使用element的upload组件自定义上传方法，使用:http-request

<el-upload
	action=""
	:http-request="uploadRequest">
	<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
  • 由于action为必选参数，将其设为空
  • :http-request覆盖上传方法
  • 使用:http-request后，:on-success等组件自带方法都会失效，需要在接口.then或.catch中写上传成功或失败的逻辑
懒羊羊懒大王
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-upload上传文件使用http-request方法，formdata传集合List到后台
m0_50207524的博客
05-29 1433
在使用el-upload上传文件，会遇到必须使用:action="upload_url"远端链接的问题，本章我们讲解怎样不适用远端链接，通过上传获取到本地的file文件，然后通过new formData来传递给后台。
ElementUi 关于 el-upload的自定义上传（http-request）的使用
weixin_52041408的博客
12-12 6847
ElementUi 关于 el-upload的自定义上传（http-request）的使用
el-upload实现自定义上传http-request
热门推荐
weixin_40565812的博客
08-15 1万+
elementUI的el-upload组件使用http-request自定义上传
element的upload组件，自定义http-request，将文件内容与其他内容一起上传
莫宛的博客
09-29 5074
自定义http-request上传函数，保存文件数据与表单其他内容一同提交（定义http-request为什么不生效）。文件el-upload必填校验，文件名格式，文件类型，文件大小校验。当接口数据需要以multipart/form-data格式上传时，前端应当如何处理。
elementUI中upload自定义上传行为 http-request属性
m0_53195432的博客
10-08 1万+
elementUI的upload地址：Element - The world's most popular Vue UI framework <el-upload action="" :http-request="uploadFile" > 默认的上传为action，可以用http-request进行覆盖。action属性不可以删除，要同时存在。 //参数必须是param，才能获取到内容 uploadFile(param){ // 获取上传的文件名 var file =..
vue2，使用element中的Upload 上传文件，自定义上传http-request上传，上传附件支持多选，多个文件只发送一次请求，代码里有注释
qq_920189602的博客
08-18 3096
vue2，使用element中的Upload 上传文件，自定义上传http-request上传，上传附件支持多选，多个文件只发送一次请求。
vue+element使用upload组件，`http-request`属性重写上传的方法
ZhangQTK的博客
09-01 1627
因为上传文件的同时，还要把文件在大小一起请求到服务端，而element原生的data(上传时附带的额外参数)做不到这个需求，所以只能使用http-request重写了。使用`http-request`属性重写后，发现element原生进度条消失了。。。另外on-success（文件上传成功时的钩子）、on-error（文件上传失败时的钩子）等等也都失效了。...
Vue项目使用element中upload组件的http-request自定义上传文件问题及限制文件类型
weixin_44237840的博客
05-23 4686
在修改项目的时候，发现之前项目是对文件类型限制jpeg、jpg、png、docx、mp4、ppt、pdf，结果没有限制住类型，上传webp图片时也可以进行上传。然后在修改的过程中发现，因为我添加了before-remove移除之前钩子函数，然后添加上传之前对文件类型校验时候，若符合就上传成功，否则移除弹框弹出进行删除，目前我去掉了二次确认删除弹框，参考代码： <el-upload class="upload-file" action :before-upload="beforeUpl
el-upload多文件一次性上传(携带json)，自定义上传事件(手动上传），不使用action属性上传.pdf
12-16
在本文中，我们将深入探讨如何使用`el-upload`组件实现多文件一次性上传，同时携带JSON数据，并自定义上传事件，不依赖`action`属性。`el-upload`是Element UI库中的一个组件，用于文件上传操作，提供了丰富的配置...
Django后端分离 使用element-ui文件上传方式
12-17
为了自定义文件上传组件的外观，可以使用CSS编写样式。例如，创建一个`avatar-uploader`类来改变上传区域的边框、圆角、鼠标指针样式等。当鼠标悬停在上传区域上时，可以通过修改边框颜色来实现视觉反馈。 3. **...
VUE 实现element upload上传图片到阿里云
11-19
Vue.js实现Element UI的Upload组件上传图片到阿里云OSS服务是常见的应用场景，尤其是在需要处理大量用户上传图片的Web应用中。以下是如何实现这一功能的详细步骤和关键知识点： 首先，确保你已经安装了必要的依赖库...
vue结合el-upload实现腾讯云视频上传功能
11-20
然后在HTML模板中，我们可以使用Element UI的el-upload组件，设置`ref="upload"`以便于在JS中访问，`action`字段设置为任意字符串（因为我们要自定义上传行为），`http-request`用于覆盖默认的上传逻辑，以及`show-...
【JavaScript源代码】element-ui中el-upload多文件一次性上传的实现.docx
12-28
总结起来，实现Element-UI的`el-upload`组件一次性上传多个文件的关键在于利用`FormData`对象来组合所有文件，并通过自定义的`http-request`属性覆盖默认的上传行为。同时，还需要确保在上传前对文件进行必要的验证...
5.CSS学习（浮动）
ShawLee0925的博客
07-23 430
css浮动——float特点
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 315
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 248
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 311
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
el-upload 自定义上传 http-request
09-15
您可以使用 el-upload 组件来自定义上传的 http-request。el-upload 是 Element UI 框架中用于文件上传的组件，支持多种自定义配置选项。 要实现自定义上传的 http-request，您可以通过设置 el-upload 组件的 action 属性来指定上传文件的接口地址。例如： ```html <el-upload action="/your-upload-api" :http-request="uploadRequest" > <!-- 填充上传组件的内容 --> </el-upload> ``` 然后，在 Vue 实例的 methods 中定义 uploadRequest 方法来处理上传请求。uploadRequest 方法会接收一个参数，其中包含了上传文件的相关信息，如文件对象、文件名等。您可以在该方法中使用 axios 或其他网络请求库发送自定义的上传请求。例如： ```js methods: { uploadRequest(file) { // 构建 FormData 对象，将文件和其他参数添加到 FormData 中 const formData = new FormData(); formData.append('file', file.raw); formData.append('name', file.name); // 使用 axios 发送自定义的上传请求 axios.post('/your-upload-api', formData) .then(response => { // 处理上传成功的响应 console.log(response.data); }) .catch(error => { // 处理上传失败的错误 console.error(error); }); } } ``` 在 uploadRequest 方法中，您可以根据实际需求构建 FormData 对象，并发送自定义的上传请求。在请求成功或失败时，您可以进行相应的处理逻辑。 这样，您就可以使用 el-upload 组件来实现自定义上传的 http-request。希望对您有所帮助！如有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值