原生js,vue2,vue3案例

普通文件上传可以通过不同的前端技术实现。以下是使用原生 JavaScript、Vue 2 和 Vue 3 分别实现文件上传的基本示例。

原生 JavaScript

使用原生 JavaScript，你可以监听表单的提交事件，并使用 XMLHttpRequest 或 fetch API 来异步上传文件。

<form id="uploadForm" action="/ffupgrade.cgi" method="post" enctype="multipart/form-data">
    <input type="file" id="fileUpload" />
    <button type="button" onclick="uploadFile()">Upload</button>

</form>

<script>
async function uploadFile() {
    const fileInput = document.getElementById('fileUpload');
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('/ffupgrade.cgi', {
            method: 'POST',
            body: formData
        });
        if (!response.ok) {
            throw new Error('Upload failed');
        }
        const data = await response.json();
        console.log('Upload successful', data);
    } catch (error) {
        console.error('Upload error:', error);
    }
}
</script>

Vue 2

在 Vue 2 中，你可以使用 v-on 指令来监听事件，并在方法中实现上传逻辑。

<template>
  <form>
    <input type="file" ref="fileUpload" />
    <button @click="uploadFile">Upload</button>

  </form>

</template>

<script>
export default {
  methods: {
    async uploadFile() {
      const file = this.$refs.fileUpload.files[0];
      if (!file) {
        alert('Please select a file first.');
        return;
      }

      const formData = new FormData();
      formData.append('file', file);

      try {
        const response = await fetch('/ffupgrade.cgi', {
          method: 'POST',
          body: formData
        });
        if (!response.ok) {
          throw new Error('Upload failed');
        }
        const data = await response.json();
        console.log('Upload successful', data);
      } catch (error) {
        console.error('Upload error:', error);
      }
    }
  }
}
</script>

Vue 3

Vue 3 的实现与 Vue 2 类似，但使用了 Composition API。

<template>
  <form @submit.prevent="uploadFile">
    <input type="file" ref="fileUpload" />
    <button type="submit">Upload</button>

  </form>

</template>

<script>
import { ref } from 'vue';

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

    async function uploadFile() {
      const file = fileInput.value.files[0];
      if (!file) {
        alert('Please select a file first.');
        return;
      }

      const formData = new FormData();
      formData.append('file', file);

      try {
        const response = await fetch('/ffupgrade.cgi', {
          method: 'POST',
          body: formData
        });
        if (!response.ok) {
          throw new Error('Upload failed');
        }
        const data = await response.json();
        console.log('Upload successful', data);
      } catch (error) {
        console.error('Upload error:', error);
      }
    }

    return {
      fileInput,
      uploadFile
    };
  }
}
</script>

在 Vue 3 示例中，我们使用了 setup() 函数和 ref 来创建响应式引用，并使用 @submit.prevent 来阻止表单的默认提交行为。点击按钮时，会调用 uploadFile 方法执行上传操作。

请注意，所有示例中的上传 URL (/ffupgrade.cgi) 应该替换为你实际的服务器端点，并且服务器需要配置以正确处理 POST 请求和文件上传。此外，错误处理和成功消息可以根据你的应用需求进行自定义。

XML,fetch,axios

下面是使用 XMLHttpRequest (XHR)、fetch 和 axios 实现文件上传的示例。

XMLHttpRequest (XHR)

function uploadFileXhr() {
    var fileInput = document.getElementById('fileUpload');
    var file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }

    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/ffupgrade.cgi', true);

    // 设置上传进度监听
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            console.log(percentComplete + '% uploaded');
            // 这里可以更新 UI 显示上传进度
        }
    };

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('Upload successful');
            // 处理服务器响应数据
        } else if (xhr.readyState === 4 && xhr.status !== 200) {
            console.error('Upload failed');
            // 处理上传失败
        }
    };

    xhr.send(formData);
}

Fetch API

async function uploadFileFetch() {
    var fileInput = document.getElementById('fileUpload');
    var file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }

    var formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('/ffupgrade.cgi', {
            method: 'POST',
            body: formData
        });

        if (!response.ok) {
            throw new Error('Upload failed');
        }

        const data = await response.json(); // 或 response.text();
        console.log('Upload successful', data);
    } catch (error) {
        console.error('Upload error:', error);
    }
}

Axios

首先，确保安装了 Axios：

npm install axios

然后使用 Axios 进行文件上传：

import axios from 'axios';

async function uploadFileAxios() {
    var fileInput = document.getElementById('fileUpload');
    var file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }

    var formData = new FormData();
    formData.append('file', file);

    try {
        const response = await axios.post('/ffupgrade.cgi', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: progressEvent => {
                let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
                console.log(percentCompleted + '% uploaded');
                // 这里可以更新 UI 显示上传进度
            }
        });

        console.log('Upload successful', response.data);
    } catch (error) {
        console.error('Upload error:', error);
    }
}

在上述示例中，我们创建了一个 FormData 对象来包含要上传的文件，并使用不同的 HTTP 客户端库来发送 POST 请求。每个示例都包括了基本的错误处理，并且在使用 XMLHttpRequest 和 axios 时还监听了上传进度事件。

请注意，服务器端点 /ffupgrade.cgi 应该替换为你的实际服务器端点，并且服务器需要配置以正确处理文件上传的 POST 请求。此外，错误处理和成功消息的 UI 更新逻辑可以根据你的应用需求进行自定义。