Vue3 El-upload文件上传时被后端拦截的问题

于 2024-10-04 10:32:36 发布
阅读量284 收藏
点赞数 12
分类专栏： Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_86261141/article/details/142700585
版权

1.问题描述

当后端设置了拦截器，前端在使用el-upload进行文件上传时并不会携带token，需要另外进行设置，一般在axios的请求拦截器中会进行token的统一获取，el-upload的数据请求不会进入到这里

2.问题解决(重点)

我们需要在组件中使用headers属性，携带token

headers格式如下

3.后端显示(了解)

获取到了前端携带的token，后续代码进行解析token从而完成token验证

我自飞扬临天下
关注
专栏目录
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
- `before-upload` 在文件上传前的钩子，可以进行拦截。 - `on-exceed` 当超过限制时的回调。 - `on-progress` 文件上传过程中的进度回调。 - `on-success` 文件上传成功时的回调。 - `on-error` 文件上传失败时的回...
vue结合el-upload实现腾讯云视频上传功能
10-15
在使用Vue.js框架结合Element UI组件库中的el-upload组件来实现视频上传至腾讯云视频点播服务时，开发者需关注以下几个关键步骤和知识点： 1. **项目需求分析**：在项目开发初期，通常需要根据需求分析确定视频上传...
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=...
通过vue的el-upload组件上传文件的例子
05-31
vue上传文件
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
vue使用el-upload上传文件及Feign服务间传递文件的方法
10-17
在本文中，将详细介绍如何在前端使用Vue框架结合Element UI的el-upload组件进行文件上传，并且展示如何在服务端使用Feign进行文件和其他数据的传递。以下是文章中所包含的知识点。 首先，前端上传文件部分涉及的Vue...
vue+el_upload实现文件上传的方式.doc
02-01
"Vue+el_upload实现文件上传的方式" 在Web开发中，文件上传是一个非常常见的需求。 Vue.js是一个流行的前端框架，el_upload是一个基于Element UI的文件上传组件。通过组合这两个技术栈，我们可以轻松实现文件上传的...
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-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 --...
vue-upload-component：Vue.js文件上传组件，多文件上传，上传目录，拖动上传，拖动目录，同时上传多个文件，html4（IE 9），`PUT`方法，自定义过滤器
02-06
Vue.js文件上传组件该组件只是一个按钮 多文件上传 上传目录 拖动上传 拖动目录 同时上传多个文件 html4（IE 9） PUT方法 自定义过滤器 缩图 块上传 例 安装 npm install vue-upload-component --save ...
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
12-03
总的来说，要解决Element-UI的`el-upload`组件在`before-upload`返回`false`时`submit()`无效的问题，可以利用组件的内部API手动触发上传或移除文件。确保在`before-upload`中执行自定义验证，并根据用户交互调用...
【JavaScript源代码】vue+el-upload实现多文件动态上传.docx
12-30
在 Vue 中，结合 Element UI 框架的 el-upload 组件，可以实现高效的多文件动态上传功能。Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了丰富的 UI 组件，el-upload 就是其中之一...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 981
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
最新发布
qq_33546823的博客
10-03 868
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
登录功能开发 P167重点
2303_81204446的博客
09-30 321
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 528
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1132
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
vue3 el-upload上传excel文件给后端传file
05-26
你可以使用 `el-upload` 组件来上传文件，然后在上传成功的回调函数中获取到文件对象，并将其传递给后端。 以下是一个基本的示例： ```vue <template> <el-upload action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" > <el-button>上传文件</el-button> </el-upload> </template> <script> export default { methods: { handleSuccess(response, file) { console.log('上传成功', response, file) }, beforeUpload(file) { // 如果需要限制上传的文件类型，可以在这里进行判断 console.log('准备上传', file) } } } </script> ``` 在以上示例中，`action` 属性指定了上传文件的接口地址，`on-success` 属性指定了上传成功后的回调函数，`before-upload` 属性指定了上传前的回调函数。你需要根据自己的需求修改这些属性的值。 在 `handleSuccess` 回调函数中，你可以获取到后端返回的数据和上传的文件对象。你可以将文件对象传递给后端，例如使用 `axios` 发送 POST 请求： ```js import axios from 'axios' handleSuccess(response, file) { console.log('上传成功', response, file) const formData = new FormData() formData.append('file', file) axios.post('/api/upload-file', formData) .then(res => { console.log('后端返回数据', res.data) }) } ``` 在以上代码中，我们将文件对象添加到 `FormData` 对象中，并使用 `axios` 发送 POST 请求，将该 `FormData` 对象作为参数传递给后端接口 `/api/upload-file`。你需要根据自己的接口地址和请求方式进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值