需求：vue项目中，H5点击按钮触发上传图片或拍照上传，上传的图片使用base64位传输到后台，最终实现身份证拍照识别功能。

实现过程

（1）设置一个按钮和一个隐藏的input，点击按钮是触发按钮上传图片和拍照功能

1
2
3
4
5
6
7
<div>
   <input id="filePhoto" type="file"  ref="file" accept="image/*" hidden @change="onInputChange($event)" /> 
    <div @click="triggerUpload">
         <img src="@res/images/scenicSpots/add-circle-white.png" />
         <span>上传图片</span>
     </div>
</div>

（2）将上传的图片转化为base64格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//点击图片触发文件上传
triggerUpload() {
   $("#filePhoto").click();
},
//文件上传到浏览器触发事件
onInputChange(el) {
  var self = this;
  var file = el.target.files[0];
  console.log(file)
  var type = file.type.split('/')[0];
  if(type === 'image') {
    //将图片转化为base64
    var reader = new FileReader();
    reader.readAsDataURL(file); // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,
    reader.onload = function () {
        var image = reader.result;  // image即base64格式，后面调用后端请求传入image
    }
  }else{
    self.$toast.showToast('请正确上传图片');
  }

},