vue + axios 实现图片上传转为 base64 格式或者二进制(Blob)格式
样式没有写,所以长得有点丑<template><div><p>请上传身份证照片</p><input type="file" accept="image/*" ref="uploadId" @change="uploadId"multiple/><p>请上传学...
·
<template>
<div class="upload">
<HHeader :title="'验证身份'" :To="'/Me'"></HHeader>
<div class="idCard">
<label for="" type="button" class="idInput">
<p>请上传身份证照片</p>
<input type="file" accept="image/*" ref="uploadId" @change="uploadId" multiple/>
</label>
<span v-if="idFileChoose">还未选择任何文件</span>
<span v-else>已选择</span>
<!-- <p>请上传身份证照片</p>
<input type="file" accept="image/*" ref="uploadId" @change="uploadId" multiple/> -->
</div>
<div class="stuCard">
<label for="" type="button" class="stuInput">
<p>请上传学生证照片</p>
<input type="file" accept="image/*" ref="uploadStu" @change="uploadStu" multiple/>
</label>
<span v-if="stuFileChoose">还未选择任何文件</span>
<span v-else>已选择</span>
</div>
<el-button @click="commit" class="button">验证</el-button>
</div>
</template>
在 @change 的时候,触发事件
<script>
import axios from 'axios'
export default {
data () {
return {
idCard: '',
stuCard: '',
idFileChoose: true,
stuFileChoose: true
}
},
methods: {
uploadId () {
let data = this.$refs.uploadId.files[0]
this.getBase64(data).then(res => {
this.idCard = res
// console.log(res)
})
this.$message({
type: 'success',
message: '上传成功',
offset: 50
})
this.idFileChoose = false
},
uploadStu () {
let data = this.$refs.uploadStu.files[0]
this.getBase64(data).then(res => {
this.stuCard = res
})
this.$message({
type: 'success',
message: '上传成功',
offset: 50
})
this.stuFileChoose = false
},
// base64 格式
getBase64 (file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function () {
imgResult = reader.result
}
reader.onerror = function (error) {
reject(error)
}
reader.onloadend = function () {
resolve(imgResult)
}
})
},
// 二进制格式
dataURItoBlob (dataURI) {
// base64 解码
let byteString = window.atob(dataURI.split(',')[1])
let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
let ab = new ArrayBuffer(byteString.length)
let ia = new Uint8Array(ab)
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ab], {type: mimeString})
},
commit () {
let idCard = this.dataURItoBlob(this.idCard)
let stuCard = this.dataURItoBlob(this.stuCard)
var formdata = new FormData()
formdata.append('idCard', idCard)
formdata.append('stuCard', stuCard)
console.log(idCard, stuCard)
axios.post('/api/idCard', formdata, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
console.log(response)
if (response.status === 200) {
this.$message({
type: 'success',
message: response.data,
offset: 50
})
} else {
this.$message({
type: 'error',
message: '验证异常,请稍后再试',
offset: 50
})
}
})
}
}
}
</script>
style
<style lang="less" scoped>
@import url('../../../assets/styles/me.less');
.upload {
width: 100%;
height: 100%;
margin-top: 50px;
.idCard {
position: relative;
margin: 20px;
border: 1px dashed #ccc;
width: 300px;
height: 70px;
padding-left: 20px;
padding-top: 20px;
.idInput {
.inputClass();
p {
margin-bottom: 10px;
}
}
span {
position: absolute;
top: 30px;
left: 150px;
color: #ccc;
}
}
.stuCard {
position: relative;
margin: 20px;
border: 1px dashed #ccc;
width: 300px;
height: 70px;
padding-left: 20px;
padding-top: 20px;
.stuInput {
.inputClass();
}
p {
margin-bottom: 10px;
}
span {
position: absolute;
top: 30px;
left: 150px;
color: #ccc;
}
}
.button {
margin-left: 140px;
}
}
</style>
me.less
.inputClass {
position: relative;
display: inline-block;
width: 125px;
height: 30px;
overflow: hidden;
text-align: center;
font-size: 14px;
line-height: 30px;
vertical-align: center;
border: 1px solid rgb(94, 208, 247);
background-color: rgb(94, 208, 247);
color: aliceblue;
border-radius: 3px;
input {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
关注公众号:大明贵妇,无套路获取前端学习资料,期待各位客官来临
更多推荐
已为社区贡献12条内容
所有评论(0)