前端input如何实现拍照上传以及选择图库上传,如何限制图片大小以及宽高，vue代码如何实现

在 Vue 中实现拍照上传和选择图库上传，可以使用 `<input type="file">` 元素和 `FileReader` 对象来实现。以下是一个示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*">
    <img :src="imageUrl" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (!file) {
        return
      }
      if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
        alert('请选择图片文件')
        return
      }
      if (file.size > 1 * 1024 * 1024) {
        alert('图片大小不能超过1MB')
        return
      }
      const reader = new FileReader()
      reader.onload = e => {
        this.imageUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

上面的代码中，我们通过 `ref` 属性获取到了 `<input type="file">` 元素，并在 `@change` 事件中监听文件改变的事件。在 `handleFileChange` 方法中，我们先判断文件是否为图片，然后判断图片大小是否符合要求，最后使用 `FileReader` 对象读取图片数据并将其显示在页面上。

需要注意的是，我们在 `<input type="file">` 元素中使用了 `accept` 属性来限制只能选择图片文件，而在判断文件是否为图片时使用了正则表达式 `/\.((gif|jpg|jpeg|png|GIF|JPG|PNG))$/`，这里的正则表达式可以根据需要进行修改。

另外，如果需要实现拍照上传的功能，可以在移动设备上使用 `<input type="file" accept="image/*" capture="camera">` 来打开摄像头进行拍照。