# TargetImgUpload 上传目标图片

版本：1.14.0

开发：高明君

交互：于涛4、刘俊森

UI：刘伟伟

规范：[已评审] http://iris.hikvision.com.cn/PBG_UED/general_UIKit/issues/6

# 安装

$ npm i @hui-pro/target-img-upload -D
# 或者
$ yarn add @hui-pro/target-img-upload --dev

# 引入

import Vue from 'vue';
import TargetImgUpload from '@hui-pro/target-img-upload';
import '@hui-pro/target-img-upload/theme/index.scss';
Vue.use(TargetImgUpload);

# 基础用法

自动扫描

手动框选

上传目标图片

<template>
  <h-target-img-upload
    upload-api="http://sword.hikvision.com.cn:4000/mock/309/imgUpload"
    :scan="scan"
    :dataProps="dataProps"
    @on-confirm="onConfirm"
  >
    <h-img-snippets-upload-btn text="上传" />
  </h-target-img-upload>
</template>

<script>
  import Vue from 'vue';
  import TargetImgUpload from '@hui-pro/target-img-upload';
  import '@hui-pro/target-img-upload/theme/index.scss';
  Vue.use(TargetImgUpload);
  export default {
    methods: {
      onConfirm(data) {
        console.log(data);
      },
      scan({ url, imgSize }) {
        return new Promise((resolve, reject) => {
          axios
            .post('/XXX/XXX.do', {
              url: url
            })
            .then(res => {
              resolve(res.data.data);
            })
            .catch(err => {
              reject(err);
            });
        });
      }
    },
    data() {
      return {
        data: [
          {
            url: '/hui-pro/images/home-image-blue.png',
            rectData: {
              face: null,
              human: [
                {
                  rect: {
                    height: 0.068333,
                    width: 0.026042,
                    x: 0.177083,
                    y: 0.145
                  }
                }
              ]
            }
          }
        ],
        dataProps: {
          face: {
            rect: {
              key: 'recommendFaceRect'
            }
          },
          body: {
            key: 'human'
          }
        },
        limitData: {
          total: 5
        }
      };
    }
  };
</script>

# 带回传数据

上传

上传目标图片

// 参考基础用法，confirm返回数据直接回传即可

data: [
  {
    url: '/hui-pro/images/upload-img-2.jpg',
    rectData: scanData
  }
];

# 手动查询

手动查询

<el-button type="default" @click="upload">
  目标查询
</el-button>
<script>
  const versions = require('docs/.vuepress/src/version.json');
  import Vue from 'vue';
  import TargetImgUpload from '@hui-pro/target-img-upload';
  import '@hui-pro/target-img-upload/theme/index.scss';
  Vue.use(TargetImgUpload);
  export default {
    methods: {
      upload() {
        const instance = TargetImgUpload.create({
          scan: this.scan,
          dataProps: this.dataProps
        });
        instance.$scan('/hui-pro/images/upload-img.jpg');
      },
      onConfirm(data) {
        console.log(data);
      },
      scan({ url, imgSize }) {
        return new Promise((resolve, reject) => {
          axios
            .post('/XXX/XXX.do', {
              url: url
            })
            .then(res => {
              resolve(res.data.data);
            })
            .catch(err => {
              reject(err);
            });
        });
      }
    },
    data() {
      return {
        versions,
        dataProps: {
          face: {
            rect: {
              key: 'recommendFaceRect'
            }
          },
          body: {
            key: 'human'
          }
        }
      };
    }
  };
</script>

# API

# Attributes

参数	说明	类型	可选值	默认值
upload-api	上传图片接口	String	-	'/'
scan	扫描目标函数，返回 Promise	Function	-	-
upload-data	上传图片接口参数	Object	-	-
upload-headers	上传图片接口 headers	Object	-	-
data-props	数据 key 值别名	Object	-	对应 data key 名
limit-data	控件限制条件	Object	-	-
types	类型	Array	'face', 'body', 'vehicle'	['face', 'body', 'vehicle']
data 1.11.0+	上传图片回传数据	Array	-	[]
uploadApiFormatter 1.11.0+	格式化上传图片接口返回值	Function	-	() => res.data

# data Attributes

参数	说明	类型	可选值	默认值
url	图片底图 url	String	-	-
rectData	框选数据，参考 `dataProps`	Object	-	-

TIP

rectData 中 $$isManual 代表是否为手动框选，$$active 代表当前框是否激活状态

# dataProps

数据共分为三种类型，face: 人脸、body: 人体、vehicle: 车辆。
每种类型含有一个 rect 矩形框，由width: 宽、height: 高、left: 水平位置、top: 垂直位置决定其位置。

数据自定义key

{
  face: {
    key: 'face',
    rect: {
      key: 'rect',
      height: 'height',
      width: 'width',
      left: 'x',
      top: 'y'
    }
  },
  body: {
    key: 'body',
    rect: {
      key: 'rect',
      height: 'height',
      width: 'width',
      left: 'x',
      top: 'y'
    }
  },
  vehicle: {
    key: 'vehicle',
    rect: {
      key: 'rect',
      height: 'height',
      width: 'width',
      left: 'x',
      top: 'y'
    },
    plateRect: {
      key: 'plateRect',
      height: 'height',
      width: 'width',
      left: 'x',
      top: 'y'
    },
    plateNum: {
      key: 'plateNum'
    },
    plateType: {
      key: 'plateType'
    },
    plateColor: {
      key: 'plateColor'
    }
  }
};

# limitProps

参数	说明	类型	可选值	默认值
img	限制上传图片规格，同步校验	Object	-	-
img.types	图片类型	Array	"jpg", "jpeg", "png", "bmp"	["jpg", "jpeg", "png", "bmp"]
img.minSize	图片最小尺寸，单位 px	Object	-	48 * 48
img.maxSize	图片最大尺寸，单位 px	Object	-	4000 * 4000
img.minFileSize	文件空间最小值，单位 b	Number	-	128
img.maxFileSize	文件空间最大值，单位 b	Number	-	8388608
total	上传目标最大数	Number	-	5

限制图片尺寸，文件大小，文件类型，以及目标上限等条件。

限制数据条件

{
  img: {
    types: ['jpg', 'jpeg', 'png', 'bmp'],
    minSize: {
      width: 48,
      height: 48
    },
    maxSize: {
      width: 4000,
      height: 4000
    },
    minFileSize: 128, // b
    maxFileSize: 8388608 // 8M
  },
  total: 5
}

# Event

事件名	说明	值
on-confirm	确认回调，返回选取数据数组	参考 data 格式
on-success	图片加载成功回调	res, file
on-error	图片加载失败回调	err, file

← ImgCarousel 多图切换 ImgSnippets 图片工具集 →