在项目中我们经常会遇到一些上传或者修改用户头像

下面我为大家说一下上传、修改用户头像的方法

手写input的方法

1、手写上传的input按钮

<input  type='file'  accept="image/*"  @change='change'>上传本地文件

type 类型，表示是一个上传文件的input
accept 上传的类型，代表是图片
@change 在选中文件之后触发

2、对应的change事件

 change(e) {// 手写的input需要一个对象将本地图片转换为对应的格式来上传let formData = new FormData();// e.target.files就是选中的文件的一个数组formData.append("file", e.target.files[0]); // 将formData这个对象传给修改头像的接口updateImg(formData).then(res => {if (res.code == 200) {Toast(res.msg);//  res.data.path就是返回的头像网址，具体还要看返回的数据this.userData.avatar = res.data.path;// 有些项目需要将请求成功的图片网址，发修改数据接口，具体看后台的处理updateUser({ avatar: res.data.path });} });},

对应的input的样式修改

DOM结构

<a href="javascript:;" class="file">选择文件<input type="file" name="" id="">
</a>

css结构

.file {position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
}
.file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
}
.file:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
}

修改后的样式如下图

vant的Uploader组件的使用

1、使用这里是基础用法

<van-uploader :after-read="afterRead" />

2、文件上传

 methods: {afterRead(file) {// file就是上面的手写input中，经过FromData包装过后的那个图片地址，可以直接上传至服务器updateImg(file).then(res => {if (res.code == 200) {Toast(res.msg);//  res.data.path就是返回的头像网址，具体还要看返回的数据this.userData.avatar = res.data.path;// 有些项目需要将请求成功的图片网址，发修改数据接口，具体看后台是否有过处理updateUser({ avatar: res.data.path });} },},

注意事项：

1.手写input需要使用一个FormData对象来转换格式，而vant的file是已经转换好的

2.这个转换过的格式，就是一个对象，直接将整个对象当成data参数传递即可，具体情况看项目接口而定

3.传递过后，后台会返回数据，其中的data.path就是修改后的头像的网址链接

4.有些项目如果后台没有处理的话，需要我们再次将这个头像网址，传递给修改用户信息的接口，已达到修改头像的目的

vue上传、修改头像相关推荐

关于拖拽上传 [一个拖拽上传修改头像的流程]
拖拽是操作系统用户体验最伟大的改进之一.它让人随心所欲的操作,更符合人们的直观感受. 如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其 ...
vue 上传裁剪头像笔记
裁剪插件 1.安装 npm install cropperjs 2.使用 <label for="file"><el-avatarshape="squa ...
2020年 IOS 逆向反编译注入修改游戏或APP的调用参数新手系列教程——使用theos tweak 注入hook修改游戏执行代码上传动态头像
2020年 IOS 逆向反编译注入修改游戏或APP的调用参数新手系列教程--使用theos tweak 注入hook修改游戏执行代码上传动态头像开篇需求&最终效果环境要求与即将使用的 ...
Springboot + elementUI实现上传用户头像
最近一直在做一个背单词的小项目练手,准备着加入个新功能,想了很多种办法,本来准备利用sm.ms图床,把用户头像上传到图床然后返回链接把链接存到数据库里,后来想了想,感觉用户的头像存在那不太好,于是还是 ...
vue上传（兼容IE9）
项目中vue文件上传功能原来使用的是element ui组件,头像上传裁剪使用的是vue-image-crop-upload,但是这两个组件只支持到IE10+,现在项目要求兼容IE9,这两个组件就没办 ...
升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
vue 上传文件和下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码: html: <input type ...
vue 上传文件和下载文件
vue 上传文件和下载文件 1. 上传文件 2. 下载文件 1. 上传文件上传文件我所使用的组件是element ui 的 el-upload,我一共进行了如下两步,第一步:修改样式,因为el-up ...
python代码图片头像_Flask 上传自定义头像的实例详解
Flask Web 开发这本书基本上做完了,后面还需要温习,但是自己做的博客总觉得简陋了点,所以,在动脑子开发新功能今天想到最基本的功能,自定义头像那这样的功能,设计到2大基本功能块 1:如何进行 ...
Git/码云上多人协作，创建分支，上传修改
1.为项目创建分支可直接在网页上进行管理操作 2.克隆一个项目 git clone https://gitee.com/xxxxx/xxx.git 3.创建本地分支 cd 进入目录文件夹 git c ...

vue上传、修改头像

在项目中我们经常会遇到一些上传或者修改用户头像

手写input的方法

1、手写上传的input按钮

2、对应的change事件

DOM结构

css结构

vant的Uploader组件的使用

1、使用这里是基础用法

2、文件上传

注意事项：

vue上传、修改头像相关推荐

最新文章

热门文章

vue上传、修改头像

在项目中我们经常会遇到一些上传或者修改用户头像

手写input的方法

1、手写上传的input按钮

2、对应的change事件

DOM结构

css结构

vant的Uploader组件的使用

1、使用 这里是基础用法

2、文件上传

注意事项：

vue上传、修改头像相关推荐

最新文章

热门文章

1、使用这里是基础用法