一、基础知识:
1.只调用手机相册
<input type="file" accept="image/*;" >
2.只调用手机相机拍照
<input type="file" accept="image/*" capture="camera">
3.调用手机相册和拍照
<input type="file" accept="image/*">
二、项目代码:
思路: 通过input标签调用手机的相册相机功能,获取图片文件,通过formdata传给后台,后台返回图片路径,获取图片路径显示在页面上。
注意: 因为直接用input标签样式不太好看,也不符合UI的设计需求,所以这里将调取手机相册和相机的input框隐藏了,然后点击下边的标签触发input事件
代码:
template
<input class="hide_file" ref ="leftFile" id="upload" type="file" @change="getFile($event)" accept="image/*">
<div class="camera" @click="clickFile">
<img v-if="img" class="bigImg" :src="img" alt="">
<img v-if="!img" class="icon" src="~@/assets/img/icon_camera.png" alt="">
<span v-if="!img" class="text">上传照片</span>
</div>
js
methods:{
// 获取选择的图片文件上传
getFile(e) {
let file = e.target.files[0];
console.log(file);
let param = new FormData(); //创建form对象
param.append('file',file,file.name);//通过append向form对象添加数据
param.append("id",this.token);
console.log(file);
let config = {
headers:{
'Content-Type':'multipart/form-data',
}
}; //添加请求头
axios.post('/wx/goods/uploadPicture',param,config)
.then(res=>{
if(res.data.code==0){
this.img = res.data.url;
this.newImg = res.data.url;
// this.$Message.success(res.data.msg)
}else{
// this.$Message.error(res.data.msg)
}
})
},
// 点击触发input的点击事件
clickFile(){
this.$refs.leftFile.click();
},
}
css
.hide_file{
display:none;
}
.camera{
position: relative;
z-index: 2;
margin: 0 auto;
margin-bottom: 10px;
width: 138px;
height: 138px;
background: #E7E7E7;
border-radius: 6px;
text-align: center;
.bigImg{
width: 138px;
height: 138px;
}
.icon{
width: 40px;
margin-top: 40px;
}
.text{
display: block;
line-height: 22px;
font-size: 15px;
color: #999;
margin-top: 8px;
}
}