vue3中使用js实现图片上传

在Vue3中使用JS实现图片上传可以使用HTML5的File API和FormData对象。以下是一个简单的实现示例：

HTML:

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

JS:

import { ref } from "vue";

export default {
  setup() {
    const fileInput = ref(null);
    const file = ref(null);

    const onFileChange = (e) => {
      file.value = e.target.files[0];
    };

    const uploadFile = () => {
      const formData = new FormData();
      formData.append("file", file.value);

      // 发送请求上传文件
      // axios.post('/api/upload', formData)
      //   .then(response => {
      //     console.log(response.data)
      //   })
      //   .catch(error => {
      //     console.log(error)
      //   })

      // 清空文件选择
      fileInput.value.value = "";
      file.value = null;
    };

    return {
      fileInput,
      file,
      onFileChange,
      uploadFile,
    };
  },
};

在这个示例中，我们使用了`ref`来引用DOM元素和变量，通过`@change`监听文件选择变化事件，将选择的文件存储在`file`变量中，然后在上传按钮的点击事件中，将文件使用`FormData`对象封装成表单数据，通过axios等发送请求上传文件。最后清空文件选择和文件变量。