---
nav: default
---
### UploadPic
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fupload-pic"/>
<a href="demo/#/component/upload-pic" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/upload-pic</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/upload-pic" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<!-- 批售出库 -->
<template>
  <article class="out_bound">
    <upload-pic
      :images.sync="images"
      :show-name="imagesConfig.showName"
      :dragable="imagesConfig.dragable"
      @upload="ImgUpload"
      @delete="ImgDelete"
    >
      <p class="title">
        {{ imagesConfig.title }}
      </p>
    </upload-pic>
    <upload-pic
      :images.sync="addimages"
      :show-name="addimagesConfig.showName"
      :dragable="addimagesConfig.dragable"
      :count="addimagesConfig.length"
      :bg-url="addimagesConfig.bgUrl"
      @upload="AddImgUpload"
      @delete="AddImgDelete"
    >
      <p class="red_dots title">
        {{ addimagesConfig.title }}
      </p>
    </upload-pic>
  </article>
</template>
<script>
import { UploadPic } from '../components/_index'
import bgimg from '../assets/demo/4.jpg'
import bgUrl from '../assets/uploadpic/default2.png'
export default {
  components: {
    UploadPic
  },
  data() {
    return {
      show: true,
      images: [
        { src: '', name: '1', code: 'other_1' },
        { src: '', name: '2', code: 'other_2' },
        { src: '', name: '3', code: 'other_3' },
        { src: '', name: '4', code: 'other_4' },
        { src: '', name: '5', code: 'other_5' },
        { src: '', name: '6', code: 'other_6' },
        { src: '', name: '7', code: 'other_7' }
      ],
      imagesConfig: {
        requestUrl: 'getImageByAuction',
        showName: true,
        dragable: true,
        title: 'default模式示例'
        // length: 7
      },
      addimages: [],
      addimagesConfig: {
        requestUrl: 'getImageByAuction',
        showName: false,
        dragable: false,
        bgUrl: bgUrl,
        title: 'add模式示例',
        length: 7
      }
    }
  },
  methods: {
    ImgUpload(i) {
      console.log(`第${i}张图片准备上传`)
      // this.$wechat.imgUpLoad(this, i, this.iamges, this.imagesConfig.requestUrl)
      this.imgUpLoad(i, this.images, bgimg, 6)
    },
    ImgDelete(i) {
      console.log(`第${i}张图片准备删除`)
      // this.$wechat.imgDelete(i, this.iamges)
      this.imgDelete(i, this.images, 6)
    },
    AddImgUpload(i) {
      console.log(`第${i}张图片准备上传`)
      // this.$wechat.imgUpLoad(this, i, this.iamges, this.imagesConfig.requestUrl)
      this.imgUpLoad(i, this.addimages, bgimg)
    },
    AddImgDelete(i) {
      console.log(`第${i}张图片准备删除`)
      // this.$wechat.imgDelete(i, this.iamges)
      this.imgDelete(i, this.addimages)
    },
    /**
     *单个图片上传
    *
    * @param {*} i 当前上传的图片序号
    * @param {*} images 当前展示的图片数组
    * @param {string} [url=''] 上传图片请求的url地址
    * @param {number} [initLen=0] 图片数组的初始化长度
    * @param {string} [key='src'] 图片地址属性
    */
    imgUpLoad(i, images, url = '', initLen = 0, key = 'src') {
      if (!i && i !== 0) {
        let autoIncreateKey = images.length - initLen
        let newImg = {
          code: `other_${autoIncreateKey}`,
          name: `其他`,
          name2: `（选填）` // 第二行名称
        }
        newImg[key] = url
        images.push(newImg)
      } else {
        images[i][key] = url
      }
    },
    /**
     *删除上传的图片
    *
    * @param {*} i 当前上传的图片序号
    * @param {*} images 当前展示的图片数组
    * @param {*} count 要求的图片张数
    * @param {*} key 图片地址属性
    */
    imgDelete(i, images, initLen = -1, key = 'src') {
      if (images.length > 0 && initLen < i) {
        images.splice(i, 1)
      } else {
        images[i][key] = ''
      }
    }
  }
}
</script>
<style lang="less">
@w2: 75rem;
.out_bound {
  .weui_cell_hd{width: 210/@w2;}
  .deal_date {
    .weui_cell_bd{
      width: 210/@w2;
      overflow: hidden;
      p{display: inline-block;}
    }
    .vux-label-desc {
      color: red;
      float: left;
    }
  }
  .red_dots{color: red;}
}

.data_state {
  padding: 30/@w2;
  color: #ababab;
  font-size: 30/@w2;
}

</style>

```

#### Github Issue