手写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 的，具体格式看项目需求所定