码迷,mamicode.com
首页 > Web开发 > 详细

vue+element 递归上传图片

时间:2019-11-22 23:31:12      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:preview   info   ade   strong   file   ogr   head   delete   上传图片   

直接上代码。
<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" >
    </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>

 

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

vue+element 递归上传图片

标签:preview   info   ade   strong   file   ogr   head   delete   上传图片   

原文地址:https://www.cnblogs.com/500m/p/11914764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!