前端学习（2695）：重读vue电商网站16之Upload 上传组件

 

通过点击或者拖拽上传文件

Js

<!-- action表示图片上传后台api地址 -->
<el-upload:action="uploadURL":on-preview="handlePreview":on-remove="handleRemove"list-type="picture"
><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>data--->
// 上传图片的url
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload'

配置如下之后，并不代表就真正上传了，此时，我们打开 Network 查看 Preview ，发现 msg 提示我们 无效 token，状态码为 400 ，这代表并没有上传成功。

这是因为此时上传控件没有使用 axios 发 ajax 请求，而是组件内部自动封装了一个 ajax，因此也就不会调用下述请求拦截器了。

解决办法是 Upload 组件有一个 headers 属性，可以设置上传的请求头部。


第一步，在组件处添加 headers 属性

第二步，在 data 中定义 headersObj ，然后添加请求头对象。

操作完成后，可以看到提示消息 msg 显示上传成功，并且此时状态码也变为了 200。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/414900.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ajax 跨域

ajax 跨域

ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考 浏览器同源政策及其规避方法 CORS请求原理 CORS是一个W3C标准&#xff0c;全称是"跨域资源共享"&#xff08;Cross-origin resource sharing&#xff09;。它允许浏览器向跨…
阅读更多...
vue3使用process报错Uncaught ReferenceError: process is not defined

vue3使用process报错Uncaught ReferenceError: process is not defined

我习惯于在config中根据process判断打包状态。这次升级到vue3遇到报错。 解决方案&#xff0c;还是配置一下vite.config.json。 增加如下配置即可。 export default defineConfig({// ...define: {process.env: process.env} })
阅读更多...
左右滑动实现activity之间的跳转

左右滑动实现activity之间的跳转

首先来看一下实现效果 1. BaseActivity extends Activity 首先&#xff0c;由于activity类之间存在很多共性 &#xff0c;比如跳以及滑动等事件&#xff0c;所以需要抽象出一个父类来&#xff0c;简化代码量。 附代码&#xff1a; /*** 按照1、2、3的步骤走* / public abstr…
阅读更多...
vue3 watch props 监听属性变化

vue3 watch props 监听属性变化

我的需求是弹出一个模态框。使用visible控制隐藏与现实&#xff0c;需要watch&#xff0c;visible变化&#xff0c;执行其他相关操作。 核心代码如下&#xff1a; import { watch, toRefs } from "vue"; const props defineProps({visible: {type: Boolean,default…
阅读更多...
前端学习（2696）：重读vue电商网站17之监听图片上传成功事件

前端学习（2696）：重读vue电商网站17之监听图片上传成功事件

阅读更多...
Android 调用原生API获取地理位置和经纬度，判断所在国家

Android 调用原生API获取地理位置和经纬度，判断所在国家

public static boolean isCN(Context context) {TelephonyManager tm (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE);String countryIso tm.getSimCountryIso();boolean isCN false;//判断是不是大陆if (!TextUtils.isEmpty(countryIso)) {count…
阅读更多...
3 View - 状态保持 session

3 View - 状态保持 session

1.状态保持 http协议是无状态的&#xff1a;每次请求都是一次新的请求&#xff0c;不会记得之前通信的状态客户端与服务器端的一次通信&#xff0c;就是一次会话实现状态保持的方式&#xff1a;在客户端或服务器端存储与会话有关的数据存储方式包括cookie、session&#xff0c;…
阅读更多...
拖拽升空的Android小火箭

拖拽升空的Android小火箭

先上演示效果 1、MainActivity 主布局就两个Button按钮 &#xff1a;一开启、二关闭 就不贴主布局xml了 因为小火箭是游离在activity之外的&#xff0c;所以不能依赖activity的生命周期 需要注意的一点是不要忘记在清单文件里配置 service 贴一下代码&#xff1a; public class…
阅读更多...
vue3 vite ts 报错ReferenceError: React is not defined

vue3 vite ts 报错ReferenceError: React is not defined

解决方案&#xff1a; 1、安装vitejs/plugin-vue-jsx pnpm install vitejs/plugin-vue-jsx2、配置vite.config.ts import vueJsx from vitejs/plugin-vue-jsxexport default defineConfig({plugins: [vue(),vueJsx() ] })
阅读更多...
Android view转bitmap，byte[]转Bitmap

Android view转bitmap，byte[]转Bitmap

1、自定义marker布局文件即自定义view文件 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height&…
阅读更多...
yii验证系统学习记录，基于yiicms（一）写的太长了，再写一篇（二）

yii验证系统学习记录，基于yiicms（一）写的太长了，再写一篇（二）

项目地址&#xff1a;https://gitee.com/templi/yiicms 感谢七觞酒大神的付出&#xff0c;和免费分享。当然也感谢yii2的开发团队们。 项目已经安全完毕&#xff0c;不知道后台密码&#xff0c;这种背景下&#xff0c;后台无法进去。绕不开的话题就是&#xff1a; 1.后台密码账…
阅读更多...
前端学习（2697）：重读vue电商网站18之监听图片删除事件

前端学习（2697）：重读vue电商网站18之监听图片删除事件

Js // 处理图片移除的操作 handleRemove(file) {// 1.获取将要删除的图片的临时路径const filePath file.response.data.tmp_path// 2.从pics数组中&#xff0c;找到这个图片对应的索引值const idx this.addForm.pics.findIndex(x > x.pic filePath)// 3.调用数组的 spli…
阅读更多...
vscode开发java接口跳转到实现

vscode开发java接口跳转到实现

我是mac系统&#xff0c;按照默认是commandF12&#xff0c;但是我的mac 13寸&#xff0c;按照这个快捷键&#xff0c;就显示亮度调节了。所以需要使用插件IntelliJ IDEA Keybindings来解决这个问题。 快捷方式如下&#xff1a;
阅读更多...
android学习路线：如何成长为高级工程师

android学习路线：如何成长为高级工程师

转载地址&#xff1a;http://blog.csdn.net/singwhatiwanna/article/details/42343847 转载原因&#xff1a;博主说的挺好&#xff0c;前辈经验。高级也算是自己的一个长远目标吧&#xff0c;学习ing ##一 明确自我定位 现在你是初级工程师&#xff0c;但是你想当个高级工程师&…
阅读更多...
前端学习（2698）：重读vue电商网站19之处理图片预览操作

前端学习（2698）：重读vue电商网站19之处理图片预览操作

图片预览窗可以用 el-dialog 组件来做&#xff0c;然后通过 on-preview 函数来处理图片预览的操作。 Js <!-- 图片预览 --> <el-dialog title"图片预览" :visible.sync"previewVisable" width"50%"><img :src"previewPath&…
阅读更多...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS

Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS

/*** 判断定位服务是否开启** param* return true 表示开启*/ public static boolean isLocationEnabled(Context context) {int locationMode 0;String locationProviders;if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {try {locationMode Settings.Secure.…
阅读更多...
vscode-spring-boot YAML_UNKNOWN_PROPERTY 解决

vscode-spring-boot YAML_UNKNOWN_PROPERTY 解决

使用vscode开发&#xff0c;安装了vscode-spring-boot ,报错如下 解决方案&#xff0c;增加对yml文件的识别 新增.vscode/settings.json 内容如下&#xff1a; {"files.associations": {"*.yml": "yaml"} }
阅读更多...
adb命令检测apk启动时间、内存、CPU使用情况、流量、电池电量等——常用的adb命令...

adb命令检测apk启动时间、内存、CPU使用情况、流量、电池电量等——常用的adb命令...

ADB&#xff1a;Android Debug Bridge&#xff0c;是Android SDK里一个可以直接操作安卓模拟器或真实设备的工具&#xff0c;颇为强大。检测APP&#xff1a;adb shell am start -W packageName/.MainActivity //启动时间adb shell dumpsys meminfo $PID …
阅读更多...
vue3父组件调用子组件方法

vue3父组件调用子组件方法

父组件 <component ref"xponent" /><script lang"ts" setup> import { ref } from "vue"; const xponent ref();const download async () > {console.log(xponent)xponent.value.download() } </script>子组件核心方法&…
阅读更多...
Android之Junit测试类

Android之Junit测试类

今天跟着视频学习了Junit测试类&#xff0c;趁热打铁、顺便把学的东西整理下来&#xff0c;再就是为了以后好回顾 1、Junit单元测试介绍&#xff1a; 在实际开发中&#xff0c;经常要对已经实现的功能进行单元测试&#xff0c;以保证当前单元没问题&#xff0c;尽可能的减少已有…
阅读更多...
最新文章

Copyright @ 2022~2023