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>

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