在vue项目中实现注册时改变头像，同时实现将图片上传的服务器端

一.如何实现在注册时点击头像时实现更改图片的操作

1.将img和input[type="file"]放在同一个div中，利用绝对定位，让两者拥有相同的大小，将input的默认样式变为透明，让img覆盖的input之上；img中有一个属性，accept,可以指定上传的img的格式

accept=“image/gif,image/jpg”... 可以指定图片的格式

accept="image/*"表示可以接受任何格式，不限制图片的格式

</div>

2.将头像显示出来

changeAvatar(e){

//将头像的文件上传到后台的服务器端

var form = new FormData();

form.append('mypic',this.$refs.fileUpload.files[0]);

console.log(this.$refs.fileUpload.files[0]);

axios({

method:'post',

url:'http://172.242.10.36:3001/user/upload',

anync:true,

contentType:false,

processData:false,

data:form

}).then((res)=>{

if(res.data.code == 1){

this.avatar = res.data.msg;

}

})

let $target = e.target || e.srcElement

let file = $target.files[0];

//console.log(file.name.indexOf(".jpg"));

if(file.name.indexOf(".jpg")!=-1 || file.name.indexOf(".png")!=-1 || file.name.indexOf(".gif") !=-1 || file.name.indexOf(".jpeg") !=-1){

this.avatar = file.name;

var reader = new FileReader()

reader.onload = (data) => {

let res = data.target || data.srcElement

this.chaAvatar = res.result

}

reader.readAsDataURL(file)

}else{

Toast("图片的格式不正确");

}

解释：

let $target = e.target || e.srcElement 表示调用它的各种属性

两个的区别：

ie下支持e.srcElement

ff下支持e.target

let file = $target.files[0]表示取第一张图

FileReader()对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用File或Blob对象指定要读取的文件或数据。其中File对象可以是来自用户一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的DataFransfer对象，还可以是来自一个HTMLCanvasElement上执行mozGetFile()方法后返回结果。

3.服务端接收客户端上传的文件并保存在服务器端

//在nodejs中引入第三方模块multer

const multer = require("multer");

//创建上传文件对象，并确定保存的目录

var upload = multer({dest: '../public/img/person/'});

//功能四：当改变图片时，保存在服务器端

router.post("/upload",upload.single("mypic"),(req,res)=>{

var file = req.file;

//console.log(req.file);

//创建新文件名

//获取原有文件名后缀 1.jpg

var srcFile = file.originalname;

var i1 = srcFile.lastIndexOf(".");

var len = srcFile.length;

var suffix = srcFile.substring(i1,len);

//时间戳+随机数+后缀

var fileName = new Date().getTime()+Math.floor(Math.random()*9999)+suffix

var newFileName = './public/img/person/'+fileName;

//将临时文件移动upload目录

//fs.renameSync() 阻塞(同步)

fs.renameSync(file.path,newFileName);

res.send({code:1,msg:fileName});

})

在vue项目中实现注册时改变头像，同时实现将图片上传的服务器端

猜你喜欢