关于upload 组件action属性一点小tips

最新推荐文章于 2024-01-24 16:57:38 发布
最新推荐文章于 2024-01-24 16:57:38 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44076775/article/details/130060662
版权
在项目中使用UI库如ElementUI的Upload组件进行文件上传时，要注意action属性指定的上传地址需考虑代理配置，特别是非全路径时。Upload组件的自动上传功能不会走axios的响应拦截，因此需要自定义处理后端返回的信息和错误处理。
摘要由CSDN通过智能技术生成

项目中做文件上传，肯定需要用到UI库的upload组件，其本质是原生input 的tyep为file时的封装，一般都会有一个action(此处以elementUI为例)属性表示上传地址，写过无数次了，有两点想要分享一下

1. action不走axios，但是走项目代理

就是说action给的上传地址如果不是全地址，那么就需要走代理，要把代理部分加上去，使用是aciton属性的上传是不走axios的，除非不用action属性，自己写上传方法

2. 使用了upolaod的自动上传，后端返回信息要自己写处理方法，不走axios响应拦截

使用了uplaod组件的action功能，就没有走axios的响应处理，所以要自己写方法去处理这个请求的响应以及报错

南宫玄色
关注
el-upload多文件一次性上传(携带json)，自定义上传事件(手动上传），不使用action属性上传.pdf
12-16
el-upload多文件一次性上传(携带json)，自定义上传事件(手动上传），不使用action属性上传
uploadAction文件上传
u012038649的专栏
10-26 3247
package com.ebook.action; import java.io.File; import java.io.IOException; import java.sql.Date; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;
element-ui的Upload上传中action发送请求的问题
BUG小太阳
09-22 5512
需求：(post请求) 问题： 1、action必填项 2、token失效 3、请求两次 解决如下： <template> <div> <el-form label-width="80px"> <el-form-item label="资源上传:"> <el-upload class="upload-demo" ref="upload" :acti.
ant-design Upload上传组件使用 action上传
m0_73481765的博客
08-30 2343
在 ant-design 的 Upload 组件中，可以使用 action 属性来指定上传文件的接口地址。当用户选择文件并点击上传按钮时，组件会将文件发送到该接口进行处理。注意：action 属性需要指定一个有效的接口地址，用于接收上传的文件。同时，你还可以使用 method 属性来指定请求的方法，默认为 post 方法。这样当用户选择文件并点击上传按钮时，该方法会被调用，并打印出要上传的文件对象，或删除存储数组中的对应路径，一个基本图片上传就完成了。
解决Antd使用upload组件上传文件，使用action上传时跨越的问题
tianbiancai1的博客
09-21 1274
使用antd的Upload组件时，上传文件出现跨域问题的解决方法
VUE UPLOAD 通过ACTION返回上传结果操作
10-14
在Vue Upload组件中，`:action`属性定义了文件上传的API接口路径，比如在示例中，它被设置为`baseUrl + "/ImportExcel/"`。这里的`baseUrl`通常是从全局配置或环境变量中获取的，以确保上传地址与项目的服务器地址...
element UI upload组件上传附件格式限制方法
10-18
5. 关于大小限制，虽然在本文内容中没有明确提及，但Element UI的upload组件也支持限制文件大小。我们可以通过设置:limit属性来限制用户一次可以上传的文件数量，同时使用on-exceed属性来定义当超出数量限制时如何...
蓝色上传UPLOAD组件网页模板
01-22
【标题】：“蓝色上传UPLOAD组件网页模板”是一个专门设计用于网页中的上传功能的界面模板，其主色调为蓝色，提供了一种专业且直观的用户交互体验。这种模板通常包括多种样式和布局，以适应不同网站的需求，使得用户...
antd组件Upload实现自己上传的实现示例
10-17
然后，我们设置了`Upload`组件的属性，如`className`、`listType`（设置为“picture-card”，表示卡片式的展示方式）、`beforeUpload`、`fileList`、`onPreview`和`onChange`。`beforeUpload`回调函数被设置为始终...
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
在上述代码中，我们首先在upload组件的class属性中添加了`upload-demo`，以定义上传区域的样式。我们设置`action`属性为`#`，这是指文件上传的服务器地址，在实际应用中需要根据后端接口进行修改。`auto-upload`属性...
关于ElementUI-upload组件中action填写相对路径，会自动拼接主机名
m0_57176999的博客
10-19 588
vue,elementui,前端，chatgpt，upload，action
postMan 模拟文件上传接口
HAN_789的博客
11-11 409
postMan 模拟文件上传接口
Vue Element ui Upload组件在上传文件时，动态切换 action上传路径
学而不思则罔,思而不学则殆
06-29 6198
Upload ，动态切换 action上传路径。
Element-UI中的el-upload插件上传文件action和headers参数
最新发布
猛犸象
01-24 2412
Element-UI中的el-upload插件上传文件action和headers参数
el-upload上传文件跨域问题解决
DaveLeeCN的博客
12-29 1万+
今天下午使用el-upload自带的上传文件时，使用文档中的网址是可以的，换成开发的接口就报错了，发现是option请求，这让我想到了项目的环境vue+axios发送请求模式，网上看了很多文章，要么说改headers，要么说些自定义的上传方法（我用这个就是为了简单、自己去写我还用这个干啥），反正这些都没帮助，后来看了一篇提到使用代理的问题，瞬间惊醒，才发现这个刚搭建的框架没有配置代理，配置代理之后...
区别：action=“/upload ，“action=“./upload“和action=“upload“
m0_74390904的博客
01-10 493
例如，如果当前URL是 C:\Users\xiaoz\IdeaProjects\JavaWeb\wenTest\src\main\java\org\example\file， 那么数据将被发送到 C:\Users\xiaoz\IdeaProjects\JavaWeb\wenTest\src\main\java\org\example\file去寻找upload。这可能依赖于具体的服务器配置和Web框架，因为当用户提交表单时，表单中的数据会发送到当前页面的URL所指的目录下的名为 "upload" 的资源。
Element-UI 中 Upload上传组件的action使用问题
热门推荐
小破孩的博客
06-09 3万+
<el-upload class="avatar-uploader" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :action="actionUrl" :headers="{ 'Authorization': token }" :auto-upload=".
element-ui upload上传组件 动态配置action遇到的的坑
littlebearGreat——宁静致远
10-11 1万+
element-ui中，使用upload上传组件时，很多时候需要带上文件的信息，这就需要动态配置action。 我遇到的情况是：配置action后上传时会报错，或者所带的信息是上一次上传的信息。 这是因为element的上传方法先执行，action的动态响应后执行。 解决方法： 给上传方法加个延时器 ...
element-ui upload 实现带token上传 以及action该怎么写
c327127960的博客
02-09 4619
element-ui upload 实现带token上传 以及action该怎么写
antdesginvue的upload组件data属性
06-01
Ant Design Vue 的 Upload 组件中的 data 属性是一个对象，用于传递额外的参数到后端接口。当上传文件时，该对象中的属性会被序列化为字符串，并且与文件一起发送到后端。例如，如果你想传递一个名为 "token" 的参数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值