手写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 有些项目如果后台没有处理的话，需要我们再次将这个头像网址，传递给修改用户信息的接口，已达到修改头像的目的

elementUi的头像上传

<el-upload :action="uploadURL"   //图片上传的地址或接口，要求完整网址//点击文件列表中已上传的文件时触发，自带一个参数，里面有http的图片格式，可以做图片预览:on-preview="handlePreview"   //删除文件时触发，自带一个参数，里面有http的图片格式:on-remove="handleRemove"//设置上传时的请求头文件，因为有些图片上传需要token,可以在这里设置:headers="headerObj"//文件列表的类型list-type="picture"// 文件上传成功时触发，这里也会有参数，可以在里面找到对应格式的图片:on-success="handleSuccess">

注意：

在每个事件中，都会自带一个参数，从里面可以找到两种格式的图片，https网络格式与"tmp_uploads\468f50432ed8b67b89e2490dc9e7f34d.jpg"本地格式，到时候上传哪种格式的图片，看接口文档的要求

如果是要做图片的预览功能，弹框需要自己写，可以在on-preview事件里，获取到当前点击的图片的网络格式

因为这里的图片上传的接口或网址是独立网址，action 属性的值，必须是一个完整的网址

headers属性是用来传递 token 的，具体格式看项目需求所定

上传，修改头像的使用相关推荐

关于拖拽上传 [一个拖拽上传修改头像的流程]
拖拽是操作系统用户体验最伟大的改进之一.它让人随心所欲的操作,更符合人们的直观感受. 如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其 ...
2020年 IOS 逆向反编译注入修改游戏或APP的调用参数新手系列教程——使用theos tweak 注入hook修改游戏执行代码上传动态头像
2020年 IOS 逆向反编译注入修改游戏或APP的调用参数新手系列教程--使用theos tweak 注入hook修改游戏执行代码上传动态头像开篇需求&最终效果环境要求与即将使用的 ...
升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
Springboot + elementUI实现上传用户头像
最近一直在做一个背单词的小项目练手,准备着加入个新功能,想了很多种办法,本来准备利用sm.ms图床,把用户头像上传到图床然后返回链接把链接存到数据库里,后来想了想,感觉用户的头像存在那不太好,于是还是 ...
python代码图片头像_Flask 上传自定义头像的实例详解
Flask Web 开发这本书基本上做完了,后面还需要温习,但是自己做的博客总觉得简陋了点,所以,在动脑子开发新功能今天想到最基本的功能,自定义头像那这样的功能,设计到2大基本功能块 1:如何进行 ...
Git/码云上多人协作，创建分支，上传修改
1.为项目创建分支可直接在网页上进行管理操作 2.克隆一个项目 git clone https://gitee.com/xxxxx/xxx.git 3.创建本地分支 cd 进入目录文件夹 git c ...
git/码云上关于项目的一些操作：初始化、克隆、上传修改等
1.本地初始化一个项目 git config --global user.name "your_name" git config --global user.email " ...
git 上传修改文件
git 上传修改文件 git init git remote add superman https://gitee.com/li_jiazhao_1/ChangClass_examination.gi ...
【探花交友】保存用户信息、上传用户头像、用户信息管理
文章目录 1.3.保存用户信息 1.4.上传用户头像 2.用户信息管理 2.1.查询用户资料 2.2.更新用户资料 1.3.保存用户信息 1.3.1.接口文档 YAPI接口地址:http://192. ...
iOS应用上传个人头像
上传个人头像,可以说每个app都会有此功能,可以从相册里面选择图片,也可以从摄像头获取图片.废话不多说,直接上代码,仅供参考!以后可以考虑把我的工具类贴出来,等我把他完善些再说吧! #pragma m ...

上传，修改头像的使用