vue + axios 实现图片上传转为 base64 格式或者二进制（Blob）格式

<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;}

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！