封装一个Vue文件上传组件案例详情

下面是封装一个Vue文件上传组件的完整攻略，包含以下步骤：

步骤一：新建组件文件

首先，在你的Vue项目中新建一个组件文件，比如命名为FileUpload.vue，并在文件头部引入Vue和相关依赖：

<template>
  <!-- 组件模板 -->
</template>

<script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default {
  name: 'FileUpload',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  methods: {}
}
</script>

<style></style>

步骤二：编写组件模板

接下来，在组件模板中添加HTML代码，以展示上传组件的样式和功能。

<template>
  <div class="file-div">
    <input type="file" name="file" @change="handleFileUpload">
    <button @click="uploadFile">上传</button>
  </div>
</template>

步骤三：添加组件方法

接下来，编写组件方法，并将它们绑定到模板上。例如：

<script>
export default {
  methods: {
    handleFileUpload(event) {
      // 处理文件上传
      this.file = event.target.files[0];
    },
    uploadFile() {
      // 上传文件
      const formData = new FormData();
      formData.append('file', this.file);
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
    }
  }
}
</script>

在这个例子中，我们定义了两个方法，handleFileUpload和uploadFile，它们分别处理文件上传过程和将上传文件发送至服务器。

步骤四：添加组件样式

最后，在组件模板中添加CSS样式，美化组件的展示效果，比如：

<style>
.file-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
}

.file-div input {
  margin-right: 10px;
}

.file-div button {
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}
</style>

示例说明一：逐层传递参数

在实际开发过程中，文件上传往往同时需要传递附加参数，比如上传文件的作者、时间等信息。为了达到这个目的，我们可以逐层传递参数：

<my-upload :upload-url="uploadUrl" :authorized-by="authorizedBy"></my-upload>

在组件中，我们定义这些参数，并通过props特性进行传递：

<script>
export default {
  props: {
    uploadUrl: { type: String, required: true },
    authorizedBy: { type: String, required: true },
  },

  methods: {
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);
      formData.append('authorizedBy', this.authorizedBy);
      axios.post(this.uploadUrl, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
    }
  }
}
</script>

在这个例子中，我们传递了两个参数：uploadUrl和authorizedBy。在上传文件时，我们把这些参数添加进FormData中一同上传。

示例说明二：文件上传进度条

上传文件时，我们可能需要展示上传进度条，以便用户知道目前上传的进度。以下是一个示例：

<script>
export default {
  data() {
    return {
      fileSize: 0,
      uploaded: 0,
      progress: 0
    };
  },

  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
      this.fileSize = this.file.size;
    },

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

      const config = {
        onUploadProgress: progressEvent => {
          this.uploaded = progressEvent.loaded;
          this.progress = Math.round((progressEvent.loaded * 100) / this.fileSize);
        }
      };

      axios.post('/upload', formData, config).then(response => {
        console.log(response.data);
      });
    }
  }
}
</script>

<template>
  <div>
    <input type="file" name="file" @change="handleFileUpload">
    <button @click="uploadFile">上传</button>
    <div>已上传{{ progress }}%</div>
    <div class="progress-bar">
      <div class="progress" :style="{ width: `${progress}%` }"></div>
    </div>
  </div>
</template>

<style>
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f5f5f5;
  margin-top: 10px;
  border-radius: 5px;
}

.progress {
  height: 20px;
  background-color: #409EFF;
  border-radius: 5px;
}
</style>

在这个例子中，我们在组件中定义了三个状态变量：fileSize，uploaded和progress，它们用于存储文件大小、已经上传的文件大小和上传进度百分比。在上传文件时，我们将这些状态绑定到axios.post()函数的onUploadProgress回调函数中，以在上传过程中更新状态并反映到进度条上。