图片多次上传

1.功能

2.遍历标签,添加元素

            <div 
                class="mb15 clearfix"
                v-for="(item, index) in addnormals"
                :key="index"
                >
                  <img :src="item.logoUrl" alt="" class="left ml10 icon_img">
                  <a href="javascript:;"  class="file left">预览
                    <input type="file" @change="fileimg(index)" :data="item.activityCode" accept="image/gif, image/jpeg, image/png, image/jpg" name="img" class="inputfil">
                  </a>
                <Button  type="primary" class="left ml10" style="margin-top:3px" v-if="index==0" @click="addnormal" >+</Button>
                <Button  type="primary" class="left ml10" style="margin-top:3px" v-if="index!=0" @click="addnorma2(index)">-</Button>               
              </div> 

3.参数的定义

     addnormals: [
        {
          logoUrl:require('../../image/moren.png')
        }
      ]

4.按钮+的函数

addnormal () {
      this.index2++
      this.addnormals.push({
        logoUrl:require('../../image/moren.png')
      })
    },

// data 中定义index2:1

5.按钮-的函数

addnorma2 (index) {
      this.addnormals.splice(index, 1)
    },

// splice 定义和用法
// splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

// 语法
// arrayObject.splice(index,howmany,item1,.....,itemX)


// 参数	描述
// index	必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// howmany	必需。要删除的项目数量。如果设置为 0,则不会删除项目。
// item1, ..., itemX	可选。向数组添加的新项目。

// 返回值
// 类型	描述
// Array	包含被删除项目的新数组,如果有的话。


// 说明
// splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换
// 那些被删除的元素。

// 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

6. 文件上传的函数

// 上传图片
    fileimg (index) {
      console.log(document.querySelectorAll('.inputfil')[index].files[0])
      if (document.querySelectorAll('.inputfil')[index].files[0].type == '') {
        this.addnormals[index].activityCode = ''
        this.addnormals[index].logoUrl = require('../../image/moren.png')
        this.$Modal.warning({
          title: '温馨提示',
          content: '请上传正确格式的图片'
        });
        return false
      }
      let formData = new FormData();
      this.addnormals[index].activityCode = '1'
      // document.querySelectorAll('.inputfil')[index].setAttribute('data','1')
      formData.append('file', document.querySelectorAll('.inputfil')[index].files[0])
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        timeout:1000*60*5
      }
    this.http.post(BASE_URL + '/fileUpload', formData, config)
    .then((resp) => {
      if (resp.code == 'success') {
        this.addnormals[index].logoUrl = resp.data

      } else {
      }
    })
    .catch(() => {
    })
    }

7. 大功告成

猜你喜欢

转载自blog.csdn.net/qq_43620210/article/details/86673010