vue3如何从电脑本地选取图片

Vue3通过`<input>`元素的`type`属性设置为`file`实现从电脑本地选取图片，示例如下：

<template>
  <div>
    <!-- 点击按钮触发input选择文件 -->
    <button @click="handleUploadClick">选择图片</button>
    <!-- input元素设置为不可见 -->
    <input type="file" ref="uploadInput" style="display:none" @change="handleUpload">
  </div>
</template>

<script>
export default {
  methods: {
    handleUploadClick() {
      // 点击按钮触发input选择文件
      this.$refs.uploadInput.click();
    },
    handleUpload(event) {
      // 读取图片文件
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        // 图片读取完成，将base64展示在页面上
        const result = reader.result;
        console.log(result);
      };
    },
  },
};
</script>

该示例中，通过点击按钮触发`<input>`元素的点击事件，从而弹出文件选择框，用户选择图片文件后，文件路径会展示在`<input>`元素的输入框中。然后通过读取文件内容，将选取的图片以 base64 格式展示在页面上。