zoukankan      html  css  js  c++  java
  • 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>
    存在疑惑的地方可以留言一起讨论 。
  • 相关阅读:
    HDU 3951 (博弈) Coin Game
    HDU 3863 (博弈) No Gambling
    HDU 3544 (不平等博弈) Alice's Game
    POJ 3225 (线段树 区间更新) Help with Intervals
    POJ 2528 (线段树 离散化) Mayor's posters
    POJ 3468 (线段树 区间增减) A Simple Problem with Integers
    HDU 1698 (线段树 区间更新) Just a Hook
    POJ (线段树) Who Gets the Most Candies?
    POJ 2828 (线段树 单点更新) Buy Tickets
    HDU 2795 (线段树 单点更新) Billboard
  • 原文地址:https://www.cnblogs.com/500m/p/11914764.html
Copyright © 2011-2022 走看看