帮我用 vue 写一个上传组件

很高兴能帮到您，我可以提供一些建议：首先，您可以使用 Vue 官方提供的 vue-cli 工具来创建一个基础的 Vue 项目；其次，可以使用 vue-router 为您的应用程序添加路由；最后，您可以使用第三方库来实现上传组件功能，比如 vue-upload-component。

相关问题

用vue写一个上传文件组件

这是一个基本的上传文件组件，使用Vue.js和Axios库：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile">
    <button @click="submitFile">Submit</button>
    <progress v-if="uploadProgress > 0" :value="uploadProgress" max="100"></progress>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploadProgress: 0
    }
  },
  methods: {
    uploadFile() {
      this.file = this.$refs.fileInput.files[0];
    },
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

在模板中，我们创建了一个文件输入框和一个提交按钮。当用户选择文件后，我们使用`@change`事件来触发`uploadFile`方法，将文件保存在组件的数据中。

在`submitFile`方法中，我们创建了一个FormData对象，将文件作为参数添加到表单数据中。我们使用Axios库的POST方法将表单数据发送到服务器。

我们还使用了`onUploadProgress`事件来显示上传进度条。在事件处理程序中，我们计算上传文件的百分比，并将其保存在组件数据中，以便在模板中显示。

用vue写一个上传视频的组件

以下是一个简单的上传视频组件示例，使用Vue.js和Axios库。

<template>
  <div>
    <input type="file" @change="uploadVideo">
    <button @click="cancelUpload" v-if="uploading">取消上传</button>
    <div v-if="uploading">
      <p>正在上传：{{ progress }}%</p>
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploading: false,
      progress: 0
    }
  },
  methods: {
    uploadVideo(event) {
      this.uploading = true;
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('video', file);
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        }
      }).then(() => {
        this.uploading = false;
        this.progress = 0;
        alert('上传成功！');
      }).catch(() => {
        this.uploading = false;
        this.progress = 0;
        alert('上传失败！');
      });
    },
    cancelUpload() {
      this.uploading = false;
      this.progress = 0;
    }
  }
}
</script>

这个组件包含一个文件选择器和一个“取消上传”按钮。当用户选择视频文件时，会触发`uploadVideo`方法，该方法将文件作为FormData对象发送到服务器。在上传过程中，会显示一个进度条，指示上传进度。如果上传成功，将显示一个警告框，否则将显示上传失败的警告框。用户可以点击“取消上传”按钮停止上传过程。