使用vue上传头像

最新推荐文章于 2024-01-16 16:11:33 发布
最新推荐文章于 2024-01-16 16:11:33 发布
阅读量269 收藏 2
点赞数 1
分类专栏： 上传头像 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46191691/article/details/107482159
版权

一 写入input

在这里插入图片描述

accept="image/png, image/jpeg, video/mp4" 代表只能上传img，png，MP4格式

在页面中的显示效果
在这里插入图片描述
用行内样式把它隐藏 display:none

二 触发

可以用其他的事件来触发它
在这里插入图片描述
然后会打开本机的图片

在这里插入图片描述
在选择一张图片打开之前，要给input设置一个change事件
打开之后会触发change事件

在这里插入图片描述

在这里插入图片描述

三 input change事件

在这里插入图片描述

小薛不会打代码
关注
专栏目录
vue上传头像
weixin_45381828的博客
08-02 473
vue上传头像关键获取file使用（e.target.files[0]）let formdata=new FormData()formdata.append('headfile',file.files[0])let url="http://vueshop.glbuys.com/api/user/myinfo/formdatahead?token=1ec949a15fb709370f"axios({...
vue头像上传
weixin_30412577的博客
11-27 3323
项目四知识点 默认头像 选择头像 <template> <div class="adatar"> <img :src="adatar?adatar:require('../../assets/images/default-user.png')" alt="" > <input type="file" na...
【vue】上传头像
Qxn530的博客
03-02 2438
上传头像，并鼠标划过头像显示遮罩层；若没有头像的时候，鼠标划过不显示遮罩层
Vue上传头像功能
weixin_53884488的博客
07-06 1755
Vue上传头像功能
vue中使用axios post上传头像/图片并实时显示到页面的方法
10-17
在Vue.js中实现头像或图片上传并实时显示至页面的功能，通常涉及以下几个关键技术点： 1. 文件输入和预览：首先，需要在HTML中提供一个文件输入元素，供用户选择图片文件。然后，通过监听文件输入元素的`change`...
详解vue更改头像功能实现
10-17
在探讨Vue更改头像功能的实现时，首先需要了解前端技术栈中Vue.js框架的基本使用方法。Vue.js是一个构建用户界面的渐进式框架，允许开发者通过声明式的方式将数据绑定到DOM元素中。在实现更改头像的需求中，会涉及到...
vue 更改头像功能实现
06-21
vue 更改头像功能实现的代码，一个简单的HTML文件，直接引用vue文件进行编写
使用Vue实现图片上传的三种方式
10-18
this.$message.error('上传头像图片大小不能超过 2MB!') } return isLt2M }, upload(item) { getAliOSSCreds().then(res => { let creds = res.body.data let client = new OSS.Wrapper({ region: 'oss-...
vue-quick-cropper-Vue移动头像上传裁剪插件可以选择裁剪区域和缩放。-Vue.js开发
05-27
(styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信，可单 vue-quick-cropper A mobile image cropping upload plugin for Vue. (styles like WeChat, ...
一个基于vue20的头像上传组件
08-10
一个基于vue2.0的头像上传组件，基于vuejs2.0 webpack环境使用的上传组件
Vue - 个人中心头像上传
FellAsleep的博客
05-11 316
2、引入下载的vue-cropper。1、下载vue-cropper。
app头像上传vue_vue上传头像
weixin_32631179的博客
12-30 137
action="上传头像接口"name="upfile":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload">import cookies from 'js-cookie';import qs from 'qs';export default {name: 'He...
vue3 上传头像
m0_66921738的博客
12-25 694
【代码】vue3 上传头像。
vue+elementui上传头像
qq_55031668的博客
04-24 3421
vue+elementui上传头像 vue页面中： <el-form-item label="路径" prop="url"> <el-upload class="avatar-uploader" action="" :http-request="field101BeforeUpload" :show-file-list="false" > <img v-if="imageUrl" :src="i
vue自定义上传头像组件
最新发布
rookien_的博客
01-16 1164
以上是没有上传的页面，以下是上传后鼠标放上去的效果。
vue实现从本地上传头像功能
文龙刚的博客
12-25 2505
vue实现从本地上传头像功能
Vue上传头像组件-基于vue-cropper
07-02 2773
效果图： 一、安装依赖 cnpm i -S vue-cropper ali-oss 二、引入组件 @/components/AvatarUploader/index.vue <!--AvatarUploader--> <template> <div class="AvatarUploader"> <div> <span v-if="!avatarUrl" @click="open.
vue上传头像并且支持上传大小验证
pmywy的博客
09-01 258
vue上传头像并且支持上传大小验证
vue springboot头像上传
10-07
头像上传功能可以通过vue和springboot来实现。在vue的代码中，利用el-upload组件来实现文件上传功能，可以通过设置auto-upload属性为false来控制是否自动上传。当点击提交按钮后，再进行图片的上传。这样可以避免一开始就将图片上传到后台磁盘上，减轻磁盘压力。同时，还需要注意判断查询记录时的条件，包括id是否能查询出记录、查询出的记录中Avatar字段不为空、传进来的头像url与原先记录中的不一致时，需要先删除原先存储的头像。这样可以保证每个用户只有一个头像存储在本地或者服务器上。 以下是相关的vue代码示例： ```javascript el-upload组件： <el-upload :action="#" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess"> </el-upload> 方法： methods: { handleAvatarSuccess(res, file) { this.$message.success("修改头像成功"); this.imageUrl = URL.createObjectURL(file.raw); }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; } } ``` 在springboot中，可以编写相应的接口来处理图片上传的逻辑。根据接口的实现，可以将上传的文件保存到本地或者服务器的指定路径上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值