vue iview上傳多文件只發送一次ajax請求，並根據上傳進度顯示上傳進度條

前言
基於iview的上傳組件（Upload）以及進度條組件（Progress）

思路
使用Upload組件提供的上傳文件之前的鉤子，將所有上傳文件攔截下來，保存在本地臨時數組，使用axios來進行上傳

完整示例

進度條部分，請上傳一個大文件來查看效果

<template>
  <Form :model="formData" :label-width="80">
    <FormItem class="upload" label="上傳文件">
      <Upload
        :before-upload="handleUpload"
        :action="''"
        :multiple="true"
      >
        <Button icon="ios-cloud-upload-outline">請選擇附件</Button>
      </Upload>
      <!-- 進度條 -->
      <Progress v-if="upload.fileProgressShow" :percent="upload.fileProgress" />
      <!-- 顯示列表 -->
      <ul>
        <li
          v-for="(item, index) of formData.dispalyFile"
          :key="index"
        >
          <span>{{ item.name }}</span>
          <Icon type="md-close" @click="handleRemove(index)" />
        </li>
      </ul>
    </FormItem>
  </Form>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      formData: {
        dispalyFile: [] // 臨時數組，同時用於顯示在頁面
      },
      // 上傳配置
      upload: {
        look: true, // 控制多文件上傳，只觸發一次ajax請求
        fileProgressShow: false, // 進度條
        fileProgress: 0 // 進度條進度
      }
    };
  },
  methods: {
    handleUpload(selectFile) {
      // 臨時數組，同時用於顯示在頁面
      this.formData.dispalyFile.push(selectFile)
      // 控制多文件上傳，只觸發一次ajax請求
      if (this.upload.look) {
        this.upload.look = false;
        // 延遲請求，等待所有文件都從本地讀取完畢
        setTimeout(() => {
          let formData = new FormData();
          this.formData.dispalyFile.map(item => {
            // files爲後臺接收參數
            // []爲多文件數組
            formData.append('files[]', item);
          })
          axios.request({
            url: '/upload',
            method: 'post',
            data: formData,
            headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: (progressEvent) => {
              // 用於上傳過程中顯示進度條
              if (progressEvent.lengthComputable) {
                // 顯示進度條
                this.upload.fileProgressShow = true;
                // 計算當前進度
                let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
                // 賦值給進度條組件
                this.upload.fileProgress = parseInt(curValue);
              }
            }
          })
            .then(res => {
              // 上傳成功處理
              // 隱藏進度條
              this.upload.fileProgressShow = false;
            })
            .catch(() => {
              // 上傳失敗處理
              // 隱藏進度條
              this.upload.fileProgressShow = false;
            })
        }, 50);
      }
      return false;
    }
  }
};
</script>

<style scoped>
.upload {
  width: 40%;
}
</style>

效果圖

上傳多文件，只進行了一次ajax請求，這裏xlz是一個超大壓縮包，用於展示進度條效果， binary 爲二進制文件

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。