最近做的一个vue项目中,要实现上传图片这个功能
accept='image/*' 调用相机图片或者相册
capture = 'camera' 直接调用相机
<div>
<input type="file" accept="image/*" ref='input' class="input" >
<button @click="publish">上传</button>
</div>
<script>
export default{
methods:{
publish(){
let ip = this.$refs.input;
let formdata = new FormData()
formdata.append("file", ip.files[0]);
//上传的照片如果想要在页面中显示
//html中创建一个img标签 ref设置为img
//let img = this.$refs.img
//const reader = new FileReader()
//reader.readAsDataURL(ip.files[0])
//reader.onload=function(e){
img.src=e.target.result
}
this.$axios
.post("/kmd-web/adm/updateAd", formdata, {
headers: { "Content-Type": "multipart/form-data" }
})
.then(res => {
if (res.data.statusCode == 200) {
alert("修改成功!");
history.go(-1);
} else {
alert("修改失败!");
}
});
}
}
}
</script>
发送的文件类型是form-data格式的