icon: ''
tags:
  en:
    - upload-pic
  zh-CN:
    - 图片上传
extra: |
  ```html
    <upload-pic
      :images.sync="formData.images"
      :show-name="imagesConfig.showName"
      :dragable="imagesConfig.dragable"
      :count="imagesConfig.length"
      @upload="ImgUpload"
      @delete="ImgDelete">
      <span class="color_red">*</span>{{finishProveImgConfig.title}}
    </upload-pic>
  ```

  ```js
  ImgUpload(i) {
    let iamges = this.formData.images
    this.$wechat.imgUpLoad(this, i, iamges, this.imagesConfig.requestUrl)
  },
  ImgDelete(i) {
    let iamges = this.formData.images
    this.$wechat.imgDelete(i, iamges)
  }
  ```

  <p class="tip">
  图片上传和删除的方法已整合到vue项目中的this.$wechat对象下，分别为：`this.$wechat.imgUpLoad`和`this.$wechat.imgDelete`
  </p>
props:
  group:
    type: String
    default: 'upload'
    zh-CN: 可拖拽模式下分组名称
  showName:
    type: Boolean
    default: true
    zh-CN: 是否显示照片标题
  imgKey:
    type: String
    default: 'src'
    zh-CN: images每项读取图片的属性名
  count:
    type: String,Number
    default: 0
    zh-CN: 最多上传照片数限制
  optional:
    type: Boolean
    default: false
    zh-CN: 上传的图片是否为选填
  dragable:
    type: Boolean
    default: true
    zh-CN: 是否可拖拽
  bgUrl:
    type: String
    default: '../../assets/uploadpic/default.png'
    zh-CN: 上传图片的背景
  images:
    type: Array
    default: []
    zh-CN: "上传的图片列表，格式为[{ src:'', name: '左前方', code: 'left_front' }], 详细属性分别为：src(图片地址)、name（标题）、name2(子标题)、code(图片代号)、bgUrl(背景图片地址)"
    
slots:
  default:
    zh-CN: 顶部标题
  subname:
    zh-CN: 多标题的情况下，子标题内容
methods:
  upload:
    params: '`(index)`'
    zh-CN: '图片上传'