vue 上传图片

闲暇时间回顾一下写的东西。
vue上传图片。UI框架是iView ，element-ui原理相同
先看下效果图

屏幕快照 2019-04-25 下午5.51.08.png

实现上传图片（每次限制上传一张），删除图片，点击查看大图的操作。
在

<template>
 <div class="GroupPhotoUpload">
 <Content class="main_content">
      <div class="pic_upload">
        <div class="pic_upload_list" v-model="Lists">
          <div style="width: 88px;height: 88px;display: inline-block;"
               v-for="item in Lists" :key="item.imgName">
            <div class="upload">
              <img :src="item">
              <div class="upload-text">
                <span class="upload-text-span">{{item}}</span>
              </div>
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>

              <Modal :title="imgofurl" v-model="visible">
                <img :src="imgofurl" v-if="visible" style="width: 100%">
              </Modal>
            </div>
          </div>
        </div>
        <Upload
          ref="upload"
          :show-upload-list="false"
          type="drag"
          :max-size="1024"
          :on-exceeded-size="handleMaxSize"
          :data='uploadData'
          :format="['jpg','jpeg','png']"
          :on-success="handleSuccess"
          action="http://localhost:8080/list/group/1/image/imageUpload"
          style="display: inline-block;width:90px;">
          <div style="width: 90px;height:90px;line-height:90px;">
            <Icon type="camera" size="20"></Icon>
          </div>
        </Upload>
      </div>
    </Content>
</div>
</template>

script中data数据声明

 data(){
      return{
        imgofurl: '',
        photoName: '',
        visible: false,

        Lists:[],
        upspliceLists:[],
        productId:'',
        uploadData:{ //需要上传的其他参数
          sessionId:window.localStorage.getItem('sessionId'),
          type: 1,
        },

      }
    },

methods中的方法

 methods:{
      init(){
        const { photoArrSplit ,upSpliceLists,productId} = this.$route.params
        this.Lists =photoArrSplit
        this.upspliceLists = upSpliceLists
        // if (!this.upSpliceLists){
        //   this.upspliceLists = []
        // }
        // if (! this.Lists ){
        //   this.Lists = []
        // }
        this.productId = productId
        console.log('upspliceLists----0000---',this.upspliceLists)
      },
      async handleSuccess (res, file) {
        let that = this
        const {data} = res
        // that.Lists.push("http://xx.xx.xx.xxx/api/icon/" + data[0].filePath)
        that.Lists.push("http://xx.xx.xx.xx/group/1/image/findImgFile?fileId="+ data[0].rowId)
        that.upspliceLists.push(data[0].rowId)
        let upspliceString  = this.upspliceLists.join(',')
        // console.log('string',upspliceString)
        let params = Object.assign({},{voucherId:this.productId},{imageUrls:upspliceString})
        const response= await api.groupModifyProImg(params)
        const {retCode,retMsg} =response
        console.log('response',response)
      },
      // 执行方法
      handleMaxSize (file) {
        this.$Notice.warning({
          title: '文件大小超限',
          desc: '文件  ' + file.name + ' 太大，上传文件大小不能超过 1 M.'
        });
      },
      handleView (ph) {
        this.imgofurl = ph;
        this.photoName = ph;
        this.visible = true;
      },
      async handleRemove (data) {
        //通过ref的name查找父组件的引用
        //const fileList = this.$refs.upload.Lists;
        // this.$refs.upload.Lists.splice(Lists.indexOf(file), 1);
        // console.log("当前动作是删除文件操作：" + data);
        // this.$root.eventHub.$emit('itemphoto',ph);

        console.log('lists',this.Lists)
        var i = this.Lists.findIndex(
          function(value, index){
            return value == data;
          }
        );
        console.log("delete index :" + i );
        this.Lists.splice( i , 1 );
        let deletArr = data.split('=')
        var splitElement = this.upspliceLists.findIndex(
          function (value,index) {
            return value == deletArr[1]
          }
        )
        this.upspliceLists.splice(splitElement,1)
        console.log('this.upspliceLists---',this.upspliceLists)
        let upspliceString  = this.upspliceLists.join(',')
        const  res = await  api.groupDelImgFiles({fileIds:deletArr[1]})
        const {retMsg,retCode } =res
        if (retCode=="0"){
          let params = ''
          params =Object.assign({},{voucherId:this.productId},{imageUrls:upspliceString})
          const response= await api.groupModifyProImg(params)
          const {retCode,retMsg} =response
        }
        console.log("删除后:"+JSON.stringify(this.Lists));
      }
    },

css样式

<style scoped>
  .upload{
    width: 88px;
    height: 88px;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    position: relative;
    margin-left: 4px;
  }
  .upload img{
    width: 88px;
    height: 88px;
    border: 1px solid ghostwhite;
  }
  .upload-text{
    display: none;
    bottom: 20px;
    height: 5px;
    line-height: 5px;
  }
  .upload-text-span{
    height: 8px;
    font-size: 8px;
  }
  .upload-list-cover{
    /*height: 100%;
        width: 100%;*/
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.4);
  }
  /* 鼠标移上去，Icon变为展示 */
  .upload:hover .upload-list-cover{
    display: block;
  }
  .upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0px 6px;
  }
</style>