el-upload点击上传文件时发送一个请求

已于 2024-07-01 18:02:41 修改
阅读量168 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2024-07-01 18:00:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45836027/article/details/140107051
版权

遇到的问题：

引用了el-upload组件，每次点击上传时，都会发自动一个请求，请求的地址是当前页面的url

原因：action的值设为空了，空字符会被当做当前页面url的相对路径

解决方案：

给组件添加这个就可以解决问题

王哪儿跑啊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+Element：el-upload自动提交文件，1.实现“选取文件”行为，2.“发起POST请求”上传文件行为，合并在一起，3.最后，再“发起POST请求”，将表单信息提交保存到后端
baidu_39557593的博客
04-25 1268
1.实现功能展示 QQ录屏20220425180342 2.官方语法说明 3.el-upload高度封装组件——Vue代码页面展示 核心Url设置代码： <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" .
图片上传使用post_element ui上传图片 el-upload的使用
weixin_32815027的博客
01-30 1769
action：''填写上传到后台的接口（因为下面我写的是手动上传的例子，所以，action填写为空）list-type：文件列表的类型（我选的是照片墙）limit：最大允许上传个数show-file-list：是否显示已上传文件列表auto-upload：是否在选取文件后立即进行上传on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用multiple：是否支持多选文件...
最简单的方法教你如何使用vue3的el-upload组件上传头像到本地后端（axios的post请求），使用koa-multer把图片存储到自定义位置并且返回图片地址（附带源码）
LuMinarY0的博客
01-07 2257
最简单的方法教你如何使用vue3的el-upload组件上传头像到本地后端（axios的post请求），使用koa-multer把图片存储到自定义位置并且返回图片地址（附带源码）
【vue】post上传get下载文件 之el-upload
@point
11-09 2223
目录 一、实现展示 二、接口 三、实现过程 一、实现展示 二、接口 1、post 上传接口 2、get下载接口 3、删除接口 4、文件列表接口 三、实现过程 1、用el-upload进行附件上传/ 将文件列表接口里的数据，渲染成table，方便我们找到它的id进行操作。 对文件列表进行判断，如果没有值，就文字提示：【暂未上传】 <el-card style="margin-top:20px"> <div slot="header" class="
关于vue+element上传文件post请求
热门推荐
攻城喵小猫的博客
12-21 2万+
关于vue+element上传文件post请求 由于项目要求这里要实现点击上传文件 首先，我们需要写个上传组件 &lt;el-upload class="upload-demo" :action="doupload()" :before-upload="before_Upload" ref="newupload"...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
首先，`<el-upload>`组件的基本用法是在模板中创建一个元素，通过属性来控制它的行为。例如： ```html <el-upload class="upload-demo" :limit="limit" :action="action" :accept="accept" :data="data" :...
el-upload多文件一次性上传(携带json)，自定义上传事件(手动上传），不使用action属性上传.pdf
12-16
`el-upload`是Element UI库中的一个组件，用于文件上传操作，提供了丰富的配置选项和回调函数，非常适合在Web应用中进行复杂的文件管理。 ### 情况一：简单表单上传 在这种情况下，我们有一个基本的文件上传表单，...
elemetUi 组件–el-upload实现上传Excel文件的实例
11-26
- `before-upload`: 这是一个可选的钩子函数，会在文件上传之前调用，参数是待上传的文件对象。如果返回 `false` 或返回一个被 `reject` 的 `Promise`，则会阻止文件上传。 2. **文件格式判断**：在上传前，我们...
vue结合el-upload实现腾讯云视频上传功能
11-20
总结来说，利用Vue.js和el-upload结合腾讯云的SDK，我们可以实现一个高效的视频上传功能，同时考虑到流量、压缩转码、适配性及版权保护等多方面的需求。在实际应用中，需要注意与后端的协作，确保数据传输的安全性和...
vue+el_upload实现文件上传的方式.doc
02-01
Vue.js是一个流行的前端框架，el_upload是一个基于Element UI的文件上传组件。通过组合这两个技术栈，我们可以轻松实现文件上传的功能。在本文中，我们将详细介绍如何使用Vue.js和el_upload实现文件上传的方式。 ...
问题解决：使用el-upload组件获取File文件，不需要文件上传，action为空会请求本地路径报404
最新发布
Anyuegogogo的博客
01-26 1241
问题解决：使用el-upload组件获取File文件，不需要文件上传，action为空会请求本地路径报404 可以自定义上传方法、覆盖默认的上传行为 主要是这个属性 `:http-request="uploadFn"`
vue上传图片
qq_68614861的博客
01-14 461
vue上传图片
Element中的el-upload 上传问题
m0_50841860的博客
09-23 1320
el-upload封装表单请求，阻止自动上传功能
el-upload 上传文件为空和action踩坑
qq_45187522的博客
07-10 1万+
el-upload 上传文件为空和action踩坑 尝试一 在使用ElementUI上传组件的时候，使用组件自带的action的时候，浏览器出现跨域的问题，虽然是前后端分离的项目，但是明明其他接口就可以正常访问后端，搜索了网上的方法没解决。 <el-form-item label="封面(大)"> <el-upload name="file" class="avatar-uploader" a
vue el-upload上传控件一直报跨域问题 post请求变成get请求
m0_37735354的博客
01-23 2万+
最近做vue的上传，用的是elmentui的el-upload控件，结果一直出幺蛾子，狗日的真矫情，说给后人听，希望大家少走坑。 不多说 截图上代码。 1。搬控件改action地址 配置好了后，直接测试，emmm ..... 报错 如下：   提示了跨域问题，这个能理解毕竟我是本机开发前端服务和后端服务端口不一样。 查找资料，vue跨域问题的解决方案，然后说的开启代理。 找到...
element-ui的Upload上传中action发送请求的问题
BUG小太阳
09-22 5452
需求：(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.
关于vue中element 的upload组件发送请求给后端
qq_14926871的博客
08-24 9936
1.用到了before-upload属性， 用于在上传文件前的校验，并且发送请求给后端，传输格式进行文件流传输 什么都不用设置，action属性随便设置，不能为空即可！ 在before-upload属性的方法中的代码如下： var _this = this; debugger; // var files=file.target.files[0]; de...
el-upload上传之自定义上传/关闭页面中断请求
sky___Show的博客
09-29 2446
自定义上传时显示进度条，正在上传的文件删除要杀死当前这个请求，这里是用的file.uid进行的对号查找。上传为post请求，请求需要携带四个参数，其中有file上传的文件。当有任务上传时，关闭或者刷新页面要杀死所有请求。
el-upload自定义上传文件
09-02
对于element-ui的el-upload组件，你可以通过以下步骤来自定义上传文件的行为： 1. 首先，你需要在el-upload组件上添加一个自定义上传的方法，可以通过设置`before-upload`属性来实现。该属性接收一个函数，用于在文件上传之前执行自定义的逻辑。例如： ```html <el-upload action="/your-upload-url" :before-upload="customBeforeUpload" > <!-- 插入上传按钮或其他内容 --> </el-upload> ``` 2. 在Vue实例中定义`customBeforeUpload`方法，该方法接收一个file参数，代表正在上传的文件。你可以在该方法中编写自己的上传逻辑。例如： ```javascript methods: { customBeforeUpload(file) { // 在这里执行你的自定义上传逻辑 console.log('正在上传文件:', file.name); // 返回 false 可以阻止文件上传 // 返回 Promise 可以延迟文件上传，并在 Promise resolve 后继续上传 // 返回其他值则会继续上传该文件 } } ``` 在`customBeforeUpload`方法中，你可以根据需要执行一些操作，比如验证文件类型、大小等。你可以返回`false`来阻止文件的上传，返回`Promise`来延迟文件的上传并在异步操作完成后继续上传，或者返回其他值来继续上传文件。 3. 根据自定义逻辑的不同，你还可以在`customBeforeUpload`方法中调用相应的API来执行上传操作。例如，你可以使用Axios库发送异步请求来上传文件： ```javascript import axios from 'axios'; methods: { customBeforeUpload(file) { // 在这里执行你的自定义上传逻辑 console.log('正在上传文件:', file.name); // 使用axios发送POST请求上传文件 const formData = new FormData(); formData.append('file', file); axios.post('/your-upload-url', formData) .then(response => { console.log('文件上传成功:', response.data); // 执行其他操作... }) .catch(error => { console.error('文件上传失败:', error); // 执行其他操作... }); // 返回 false 可以阻止文件上传 // 返回 Promise 可以延迟文件上传，并在 Promise resolve 后继续上传 // 返回其他值则会继续上传该文件 } } ``` 通过以上步骤，你可以自定义el-upload组件的文件上传行为，并在`customBeforeUpload`方法中编写你所需的逻辑。请根据实际情况进行调整和拓展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值