插件安装
	
图片上传组件 将组件放在自己的组件库里导入即可

### 注意

1.最好在回调结果后使用debugger看一下结果！

2.请先看一下示范代码。

3.如果有问题和建议可以联系我，也可以自己修改成符合自己项目的。

4.注意，一定要去看看接口的返回值和插件写的返回值是否一样，如果不一样，可以在下面写注释的地方修改。
	
#### 导入：  
> import imgUpload from '@/components/my-components/uImgUpload.vue';

-------------------------------------   

#### 属性 attribute

| 属性名            | 类型     | 介绍          | 默认值              |
|----------------|--------|-------------|------------------|
| imgArr         | Array  | 图片展示列表      | \[\]             |
| uploadImgCount | Number | 一次可选多少张图片   | 3                |
| imgCount       | Number | 一共可以上传多少张图片 | 3                |
| imgSize        | Number | 上传图片的大小     | 2 \(M\)          |
| imgType        | Array  | 能上传图片的类型(注：小程序下不兼容)    | \["jepg","png"\] |
| closeTip        | Boolean  | 是否关闭提示    | false |
| formData       | Object  | 提交时携带数据   | {}  |
| loading        | Boolean  | 是否存在加载动画    | true |
| url        | String  | 上传图片的url (1.1.0版本新增)     | "" |
| async        | Boolean  | 是否选择图片后直接上传 (1.1.0版本新增)    | false |
| header        | Array  | 请求头添加新的属性值 (1.1.1版本新增)    | [] |
| previewMany   | Boolean  | 是否开启多图预览 (1.1.2版本新增)    | false |
| config        | Object  | 配置对象 **已经设置默认值** (1.1.2版本新增)    | {} |
| pressImg   | Number  | 是否开启图片压缩,0-100为压缩值 (1.1.3版本新增)    | -1(不开启) |
| single   | Boolean  | 单图模式，上传一张后不会再出现上传按钮 (1.1.7版本新增)    | false |
| disabled   | Boolean  | 禁用，用于回显展示 (1.1.7版本新增)    | false |
------------------------------------- 

>>config对象参数

| 属性名            | 类型     | 介绍          | 默认值              |
|----------------|--------|-------------|------------------|
| delIcon         | String  | 删除图片的icon[使用图片链接]       | ""            |
| resultTip | Boolean | 是否显示结果提示   | true                |
| resultType       | String | 结果展示类型 [正在开发2风格] | 1                |
| loadIcon        | String | 加载时的图标[使用图片链接]      | ""         |
| loadText        | String  | 加载时的文字    | "" |
| borderStyle        | String  | 上传框的样式[完全自定义]    | 'border:2px dotted #dadada' |
| addStyle        | String  | 上传图片的中间icon[1(图片标识)/2(加号标识)]    | "1" |

------------------------------------- 

#### 方法 method

>当**async**为**true**的时候
>存在两个方法

| 方法名    | 介绍                     |
|--------|------------------------|
| result | 上传后的返回结果\(成功对象\)，存在all和new两种类型(详细解释见下)       |
| delImg | 删除图片返回下标\(传入的图片数组的下标\)*与async值无关* |
------------------------------------- 
**all： 将会把之前传的和新传入的图片数组一起返回出来。**

**new： 将新传输的图片以数组的方式直接返回，格式为["图片1","图片2"],可以直接用数组合并在提交数据上。**

-------------------------------------

>当**async**为**false**的时候
>开始上传图片 在父页面中调用该方法（当async为false,也就是默认值的时候使用）
> *注意* 一定要给组件 **ref="imgUpload"**

-------------------------------------

####示范代码

```

<template>
<!--里面一些属性是示范作用才写上去的，具体需要使用哪些属性可自由调整-->
<!--直接上传图片-->
<imgUpload config:"config" previewMany :imgArr="imgArray" loading async url="xxx(上传图片的url)" @result="resultUrl" @delImg="delImg"></imgUpload>
<!--点击按钮一次提交-->
<imgUpload :imgArr="imgArray" imgCount="9" ref="imgUpload" url="xxx(上传图片的url)"></imgUpload>
<button type="default" @click="submit">提交</button>
</template>

<script>
	import imgUpload from '@/components/my-components/imgUpload.vue';
	export default {
		components: {
			imgUpload
		},
		data() {
			return {
				imgArray:[],
				head:[{token:"zx6c54asdq89w7eqw6e46ad4"},{sign:'s6d5a4dqwe7q9w87a6'}],  //示范格式 JSON   使用方式header="head"
				config:{
						delIcon: '', //删除图片icon
						resultTip: true, //结果提示
						resultType:'1', //结果展示类型
						loadIcon: '', //加载时的图标
						loadText: ''  //加载时的文字
					}
			}
		},
		# methods: {
		  submit(){
			 //开始上传图片
           this.$refs.imgUpload.upload(res=>{
			   if(res.code==0){
			   		//0为正常返回，将回调的线上图片数组 赋值给需要提交的表单里
					//res.urlArray 线上路径图片数组对象
					//TODO
				}else{
					//用户没有上传图片的返回 code码为400
				}

				//可以在下面继续写提交代码
		   });
	},
	//直接上传的方法
	resultUrl(e){
				console.log(e); 
				//成功默认为0
				if(e.code==0){
				//e在单图(single=true)情况下 e.url 可得到。多图情况下e是一个数组
					this.imgArr.push(...e.new);
				}
	},
	delImg(e){
		this.imgArr.splice(e,1) //为删除图片数组的下标
	}
}
</script>

```


-------------------------------------

###[彩蛋提示]
可以在组件里修改组件小提示的颜色哦！只需要修改成功失败警告的颜色即可。

```
tipObj: {
					prompt: '',
					typeColor: '#009100',
					success: '#009100', //成功-#009100; 可自定义修改
					warning: '#d3d300', // 警告 -#d3d300; 可自定义修改
					error: '#FF0000' // 失败--#FF0000; 可自定义修改
				},

```