官方地址
<template>
<div>
<el-col :span="24" class="upload_img">
<el-col :span="12">
<el-col :span="4"><span>拍照上传</span></el-col>
<el-button @click="onTake" icon="el-icon-camera" size="small">
拍照上传
</el-button>
</el-col>
</el-col>
<el-col :span="24">
<el-col :span="12">
<el-col :offset="4">
<el-image style="width: 100px; height: 100px" v-if="imgUrl" :src="'http://' + imgUrl" :fit="fit">
</el-image>
</el-col>
</el-col>
</el-col>
<el-dialog title="拍照上传" :visible.sync="visible" @close="onCancel" width="1065px">
<div class="box">
<video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
<canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
</div>
<div slot="footer">
<el-button @click="drawImage" icon="el-icon-camera" size="small">
拍照
</el-button>
<el-button v-if="open" @click="getCompetence" icon="el-icon-video-camera" size="small">
打开摄像头
</el-button>
<el-button v-else @click="stopNavigator" icon="el-icon-switch-button" size="small">
关闭摄像头
</el-button>
<el-button @click="resetCanvas" icon="el-icon-refresh" size="small">
重置
</el-button>
<el-button @click="onCancel" icon="el-icon-circle-close" size="small">
取消
</el-button>
<el-button @click="onUpload" :loading="loading" type="primary" icon="el-icon-upload2" size="small">
上传
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
suppPic
} from '@/axios/index'
export default {
name: "upload",
data() {
return {
imgSrc: '',
visible: false,
loading: false,
open: false,
thisVideo: null,
thisContext: null,
thisCancas: null,
videoWidth: 500,
videoHeight: 400,
front: true,
fit: 'none',
fileList: []
}
},
methods: {
onTake() {
this.visible = true;
this.getCompetence();
},
onCancel() {
this.visible = false;
this.resetCanvas();
this.stopNavigator();
},
onUpload() {
if (this.imgSrc) {
const file = this.imgSrc;
const time = (new Date()).valueOf();
const name = time + ".png";
const conversions = this.dataURLtoFile(file, name);
const data = new FormData();
data.append('picture', conversions);
this.loading = true;
suppPic(data).then(res => {
if (res.data) this.$message({
message: '保存成功',
type: 'success'
})
this.loading = false
this.imgUrl = 'http://' + res.data
this.onCancel()
this.$emit('imgObj', {
upload: true,
imgsrc: res.data
})
})
} else {
this.$message({
message: '请点击拍照',
error: 'warning'
});
}
},
getCompetence() {
this.$nextTick(() => {
const _this = this;
this.open = false;
this.thisCancas = document.getElementById('canvasCamera');
this.thisContext = this.thisCancas.getContext('2d');
this.thisVideo = document.getElementById('videoCamera');
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
let getUserMedia = navigator.webkitGetUserMedia || navigator
.mozGetUserMedia ||
navigator.getUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error(
'getUserMedia is not implemented in this browser'))
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}
const constraints = {
audio: false,
video: {
width: _this.videoWidth,
height: _this.videoHeight,
transform: 'scaleX(-1)',
facingMode: {
exact: "environment"
}
}
};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
if ('srcObject' in _this.thisVideo) {
_this.thisVideo.srcObject = stream
} else {
_this.thisVideo.src = window.URL.createObjectURL(stream)
}
_this.thisVideo.onloadedmetadata = function(e) {
_this.thisVideo.play()
}
}).catch(err => {
this.$message({
message: '没有开启摄像头权限',
error: 'error'
})
});
});
},
drawImage() {
this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
this.imgSrc = this.thisCancas.toDataURL('image/png');
},
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
},
clearCanvas(id) {
let c = document.getElementById(id);
let cxt = c.getContext("2d");
cxt.clearRect(0, 0, c.width, c.height);
},
resetCanvas() {
this.imgSrc = "";
this.clearCanvas('canvasCamera');
},
stopNavigator() {
if (this.thisVideo && this.thisVideo !== null) {
this.thisVideo.srcObject.getTracks()[0].stop();
this.open = true;
}
},
},
beforeDestroy() {
this.stopNavigator()
},
props: {
imgUrl: String
}
}
</script>
export const suppPic = params => {
const HOST = ''
return axios.post(`${HOST}/api/Index/picture_upload`, params, {
headers: {
headers: {
'Content-Type': 'multipart/form-data'
}
}
})
}