vue+element 遞歸上傳圖檔

直接上代碼。

<template>

  <div>

    <el-upload

      action="http://localhost:3000/picture"

      :http-request = "getimages"

      :before-upload = "beforeUp"

      :headers="headers"

      list-type="picture-card"

      :on-preview="handlePictureCardPreview"

      :on-progress="progress"

      :on-remove="handleRemove">

      <i class="el-icon-plus"></i>

    </el-upload>

    <el-dialog :visible.sync="dialogVisible">

      <img width="100%" :src="dialogImageUrl" alt="">

    </el-dialog>

    <el-row>

      <el-button type="info" plain @click="upload">資訊按鈕</el-button>

    </el-row>

 </div>

</template>

<script>

  export default {

    data() {

      return {

        dialogImageUrl: '',

        dialogVisible: false,

        headers:{},

        imgArr:[],

        index:0,

        formData:new FormData()

      };

    },

    methods: {

      beforeUp(file){

        // console.log(file);

        /* 擷取圖檔原本的二進制對象，并存儲到圖檔數組模型中 */

        this.imgArr.push(file)

      },

      /* 移除 */

      handleRemove(file, fileList) {

        // console.log(file, fileList);

        console.log('移除時擷取的圖檔的 uid = '+file.uid);

        this.imgArr =  this.imgArr.filter(t=>t.uid!=file.uid)

      },

      /* 預覽 */

      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;

        this.dialogVisible = true;

        // console.log(file);

      },

      /* 上傳中 */

      progress(){

        console.log('上傳中');

      },

      /* 代替預設上傳圖檔方法 */

      getimages(res){

      },

      /* 最後點選上傳 */

      upload(){

          this.a1()

      },

      /* 遞歸1條條上傳 */

      a1(){

        if(this.index<this.imgArr.length){

          if(this.index==this.imgArr.length){

            return

          }

          this.formData.delete('file')

          this.a2()

        }

      },

      async a2(){

        console.log(this.index);

        this.formData.append('file',this.imgArr[this.index]);

        this.$http.post('/picture',this.formData)

        this.index++

        this.a1()

      }

    },

    created(){

      // this.$http.get('/picture')

      // this.headers ={Authorization : 'Bearer '+(localStorage.token || '')}

    }

  }

</script>

存在疑惑的地方可以留言一起讨論 。