一、html部分：
二、js部分（由于本项目用ts写的，差异的地方请各位自己调整下）
<script lang="ts">
import {XtVue, Component, Watch, XtRouter,Prop} from "../../../common/common";
import {AxiosResponse} from 'axios';
@Component
export default class UploadHeadComp extends XtVue{
//头像信息
public headInfo:any = {
src:require('../../../assets/images/icon/user_default.png')
}
//头像文件
public file:any = null
//挂载
mounted() {
console.log('头像上传');
}
/**
* 触发input[type='file']点击
* */
public uploadHeadImg(){
this.$el.querySelector('.headInputFile').click();
}
/**
* 头像图片改变
* */
public handleHeadChange(e){
//两个的区别是：ie下支持e.srcElement，ff支持e.target
let $target:any = e.target || e.srcElement;
let file:any = $target.files[0];
this.file = file;
//判断上传文件是否是图片类型：w 的释义都是指包含大 小写字母数字和下划线 相当于([0-9a-zA-Z])
if(!/image/w+/.test(file.type)){
this.$notify.error({title: '错误',message: '请上传图片文件'});
return;
}
//获取图片大小，做图片大小限制
let imgSize:any = file.size;
//图片大小限制为5M,这里获取的单位大小为b
if(imgSize > 5*1024*1024){
this.$notify.error({title: '错误',message: '图片大小限制为5M'});
return;
}
/**
* 开始渲染选择的图片的两种方式：1、本地路径方法，2、base64方法
* 两种方法区别：
* 1、通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串；通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL。
* 2、执行时机：createObjectURL是同步执行（立即的）；FileReader.readAsDataURL是异步执行（过一段时间）。
* 3、内存使用：createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放；
* FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）。
* 4、优劣对比：使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存；
* 如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL。
* */
// 本地路径方法 1
// this.headInfo.src = window.URL.createObjectURL(e.target.files[0]);
// base64方法 2
//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据
let reader:any = new FileReader();
//onload 事件会在页面或图像加载完成后立即发生
reader.onload = (data) => {
let res = data.target || data.srcElement;
this.headInfo.src = res.result
},
//FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL
reader.readAsDataURL(file);
//将上传的头像图片提交给后台
this.handleUploadHead();
}
/**
* 头像上传给后台
* */
public handleUploadHead(){
let file:any = this.file;
let picData:any = new FormData();
picData.append('file',file,file.name);
//接口请求，根据自身项目做调整，这里只是简单介绍
axios.post({
url:"接口url",
method:'post',
data:picData,
}).then(res=>{
if(res.data.success == true){
//这里是借用elelment UI的消息提示
this.$notify.success({title: 'success',message: '头像图片上传成功'});
return;
}
this.$notify.error({title: '错误',message: res.data.msg});
}).catch(err=>{
console.log(err);
})
}
}
</script>
说明：
1、handleHeadChange这个方法是做一些简单校验和判断，介绍了两种本地展示，在实际项目中，这步可以省略，直接将获取的头像文件数据传给后台，在通过后台接口获取头像路径
不足：
1、后期有时间会对这篇博客优化，优化内容是加上图片裁剪功能，如果有需要要js的可以联系我，js方法的裁剪、图片放大和缩小是有的