Vue实现带进度条的文件拖动上传功能

下面是Vue实现带进度条的文件拖动上传功能的完整攻略：

准备工作

1. 安装Vue.js相关依赖

npm install vue vue-resource

1. 引入Vue相关依赖

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource"></script>

实现步骤

1. 创建Vue实例并定义data数据

new Vue({
  el: '#app',
  data: {
    file: '',
    progress: 0
  }
})

2. 创建文件选择和上传按钮

<input type="file" @change="selectFile">
<button @click="uploadFile">Upload</button>

3. 实现文件选择功能

methods: {
  selectFile(event) {
    this.file = event.target.files[0];
  }
}

4. 实现文件上传

methods: {
  uploadFile() {
    let formData = new FormData();
    formData.append('file', this.file);
    this.$http.post('http://example.com/upload', formData, {
      progress: (event) => {
        this.progress = Math.round((event.loaded / event.total) * 100);
      }
    }).then(response => {
      console.log(response);
    }).catch(error => {
      console.log(error);
    });
  }
}

这里使用了vue-resource插件中的post方法来发送请求，可以自动将formData中的数据编码成multipart/form-data格式。

5. 实现进度条显示

<div class="progress-bar" :style="{ width: progress + '%' }"></div>

.progress-bar {
  background-color: #F5F5F5;
  border-radius: 5px;
  height: 5px;
  margin-top: 10px;
}
.progress-bar:before {
  content: '';
  display: block;
  height: 100%;
  border-radius: 5px;
  background-color: #3498DB;
  transition: width .3s ease;
}

这里利用了Vue的指令和计算属性：使用:style绑定样式，计算属性中进行了样式的计算。

computed: {
  getProgressStyle() {
    return {
      width: this.progress + '%'
    }
  }
}

示例一：上传图片并预览

selectFile(event) {
  this.file = event.target.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(this.file);
  reader.onload = () => {
    this.preview = reader.result;
  }
}

<img :src="preview" v-if="preview">

示例二：限制文件类型和大小

selectFile(event) {
  let file = event.target.files[0];
  let fileType = file.type.split('/')[0];
  let maxSize = 1024 * 1024 * 10; // 10MB
  if (fileType !== 'image' || file.size > maxSize) {
    event.target.value = ''; // 清空选中的文件
    return;
  }
  this.file = file;
}