vue3 | <input type="file"> | 图片上传（从相册选择和拍照选择）| 组合式api

用input写上传照片功能（简单实现）

官网 developer.mozilla.org/zh-CN/docs/…

效果图

demo：

<img :src="user.iconImage" class="img" />
<div class="take_photo">
<-- 拍照 -->
  <input
    type="file"
    accept="image/*"
    capture="camera"
    @change="takePhoto"
    ref="cameraInput"
    class="camera_input"
  />
  <div class="photo">
    <img src="@/assets/photo_img.jpg" class="photo_img" />
    <div class="photo_text">Take a photo</div>
  </div>
</div>
<-- 相册 -->
<div class="picture_upload">
  <input type="file" @change="handleFileUpload" ref="uploadInput" class="upload_input" />
  <div class="picture">
    <img src="@/assets/picture_img.jpg" class="picture_img" />
    <div class="picture_text">Gallary</div>
  </div>
</div>

//获取摄像头功能
const takePhoto = async () => {
  isChange.value = false
  console.log(cameraInput)

  // 需要发送的数据
  let formData1 = new FormData()
  formData1.append('file', unref(cameraInput).files[0])

  // post上传用户头像
  await userStore.uploadImage(formData1)
  if (userStore.resp_uploadImage.errCode == 1000) {
    // 获取上传图片的路径
    user.iconImage = 'http://192.168.100.7:7001' + userStore.resp_uploadImage.data.url
  } else {
  }
}

input其他属性

type

<input> 的工作方式相当程度上取决于 type 属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

可用的值包括：

类型	描述	基本示例
button	没有默认行为的按钮，上面显示 value 属性的值，默认为空。	play
checkbox	复选框，可将其值设为选中或未选中。	play
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。	play
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。	play
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。	play
email	编辑邮箱地址的字段。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。	play
file	让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。	play
hidden	不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。	play
image	图形化 submit 按钮。显示的图像由 src 属性决定。如果 src 属性缺失，就会显示 alt 的内容。	play
month	输入年和月的控件，没有时区。	play
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。	play
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。	play
radio	单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。	play
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定可接受值的范围。	play
reset	此按钮将表单的所有内容重置为默认值。不推荐使用该类型。	play
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。	play
submit	用于提交表单的按钮。	play
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。	play
text	默认值。单行的文本字段，输入值中的换行会被自动去除。	play
time	用于输入时间的控件，不包括时区。	play
url	用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。	play
week	用于输入以年和周数组成的日期，不带时区。	play
废弃的值
datetime 已弃用	用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。	play

属性

<input> 元素包含的属性包含全局的 HTML 属性和以下这些额外属性：

属性	类型	描述
accept	file	文件上传控件中预期文件类型的提示
alt	image	图片类型的 alt 属性。对无障碍是必需的
autocomplete	除了 checkbox、radio 和按钮以外	表单自动填充特性提示
capture	file	文件上传控件中媒体捕获方法的提示
checked	checkbox、radio	控件是否选中
dirname	search、text	表单字段的名称，用于在提交表单时发送元素的方向性
disabled	所有类型	表单控件是否禁用
form	所有类型	将控件联系到表单元素中
formaction	image、submit	要提交表单的 URL 地址
formenctype	image、submit	提交表单时使用的表单数据编码类型
formmethod	image、submit	提交表单时所使用的 HTTP 方法
formnovalidate	image、submit	绕过表单提交时的表单控件验证
formtarget	image、submit	提交表单时的浏览上下文
height	image	与 <img> 元素的 height 属性有相同含义，垂直方向上的维度值
list	除了 hidden、password、checkbox、radio 和按钮以外	自动完成选项的 <datalist> 的 id 属性的值
max	date、month、week、time、datetime-local、number、range	最大值
maxlength	text、search、url、tel、email、password	value 的最大长度（字符数）
min	date、month、week、time、datetime-local、number、range	最小值
minlength	text、search、url、tel、email、password	value 的最小长度（字符数）
multiple	email、file	布尔值。是否允许多个值
name	所有类型	表单的控件名称，作为键值对的一部分与表单一同提交
pattern	text、search、url、tel、email、password	为了使得 value 有效，必须符合的模式
placeholder	text、search、url、tel、email、password、number	当没有值设定时，出现在表单控件上的文字
readonly	除了 hidden、range、color、checkbox、radio 和按钮以外	布尔值。如果存在，其中的值将不可编辑。
required	除了 hidden、range、color 和按钮以外	布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。
size	text、search、url、tel、email、password	控件的尺寸
src	image	与 <img> 元素的 src 属性含义相同，图片资源的地址
step	date、month、week、time、datetime-local、number、range	有效的增量值
type	所有类型	表单控件的类型
value	所有类型	表单控件的初始值
width	image	与 <img> 元素的 width 属性含义相同