vue2 H5原生input标签实现拍照功能、web端实现上传图片功能，以及实现图片预览功能和修改上传图片原生样式

前言：我做的项目是H5嵌套小程序。要实现的功能是拍照功能，且，在未调用接口前有预览功能。

拍照功能：

补充：手机端是拍照直接调用设备摄像头拍照，web端是上传图片的形式。

因为input type="file" 默认的‘请选择上传文件’以及上传后显示的文件名不支持修改和配置。所以我采用曲线实现修改显示文件以及不显示文件名的方式：上层标签覆盖的形式，具体看代码：
html:

 <label for="camera">
  <div class="camera">
    <div class="txt">点击拍照</div>
    <input
      id="camera"
      ref="camera"
      type="file"
      accept="image/*"
      capture="camera"
      @change="handleInputChange"
    >

  </div>
</label>

之所以加label，是为了能在点击上层自定义样式的时候，触发input type="file"标签的事件。
css:

<style lang="less" scoped>
.camera {