Vue 3 文件上传组件示例 - 简单易懂

<template>
  <div>
    <h2>上传文件</h2>
    <input type='file' @change='handleFileUpload' />
    <button @click='uploadFile'>上传</button>
    <div v-if='uploadStatus'>{{ uploadStatus }}</div>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  name: 'FileUpload',
  setup() {
    const selectedFile = ref(null);
    const uploadStatus = ref('');

    const handleFileUpload = (event) => {
      selectedFile.value = event.target.files[0];
    };

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

      try {
        const response = await fetch('http://localhost:3000/upload', {
          method: 'POST',
          body: formData,
        });
        const data = await response.json();
        uploadStatus.value = data.message;
      } catch (error) {
        console.log(error);
      }
    };

    return {
      selectedFile,
      uploadStatus,
      handleFileUpload,
      uploadFile,
    };
  },
};
</script>
<p>在这个组件中，我们使用了<code>ref</code>来定义了两个变量：<code>selectedFile</code>和<code>uploadStatus</code>。<code>selectedFile</code>用于存储用户选择的文件，<code>uploadStatus</code>用于显示文件上传的状态信息。</p>
<p>然后我们定义了两个方法：<code>handleFileUpload</code>和<code>uploadFile</code>。<code>handleFileUpload</code>用于处理用户选择的文件，并将其存储在<code>selectedFile</code>变量中。<code>uploadFile</code>用于将文件上传到服务器，并根据服务器返回的信息更新<code>uploadStatus</code>变量。</p>
<p>最后，我们在模板中使用了<code>&lt;input&gt;</code>元素和一个上传按钮来触发上传操作，并根据<code>uploadStatus</code>变量来显示上传状态信息。</p>