# weui-upload

**Repository Path**: kzm/weui-upload

## Basic Information

- **Project Name**: weui-upload
- **Description**: weui 上传组件扩展插件，支持单页面多上传框。再也不用考虑 wx.chooseImage，wx.previewImage，wx.uploadImage调用了。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-12-24
- **Last Updated**: 2022-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weui-upload

#### 介绍
weui 上传组件扩展插件，支持单页面多上传框。再也不用考虑 wx.chooseImage，wx.previewImage，wx.uploadImage调用了。

![上传示意图](https://images.gitee.com/uploads/images/2020/1224/144926_0a3fc271_96334.png "4.png")


#### 使用说明

0. 重要说明

  weuiUpload调用最好放在 wx.ready(function (){}) 内。

1.  引入文件

```js
// 依赖weui.css
<link rel="stylesheet" href="weui/weui.css">
<link rel="stylesheet" href="../src/css/weui.upload.min.css">
// 依赖jweixin、jquery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="../src/js/weui.upload.min.js"></script>
```

2.  HTML
```html
<div class="weui-uploader" id="uploadDiv"></div>

<div class="weui-uploader" id="uploadDiv2"></div>
```
3.  配置使用
```js
$(function () {
	$('#uploadDiv').weuiUpload({
		maxNum: 5, 
		imageUrl: [
			'http://iph.href.lu/96x96?text=weui-upload&fg=666666&bg=cccccc',
			'http://iph.href.lu/96x96?text=weui-upload&fg=666666&bg=cccccc'
		]
	});
	
	$('#uploadDiv2').weuiUpload({
		title:'第二个图片上传', 
		inputName:'imgFile', 
		maxNum: 3, 
		imageUrl: [
			'http://iph.href.lu/96x96?text=weui-upload&fg=666666&bg=cccccc',
			'http://iph.href.lu/96x96?text=weui-upload&fg=666666&bg=cccccc',
			'http://iph.href.lu/96x96?text=weui-upload&fg=666666&bg=cccccc'
		], 
		error: function(res) {
			console.log(res);alert(res.msg);
		}
	});
})
```

4.  后端接收

```php
/**
* php tp6 参考
* 传递给后台的是微信media_id，需要先去微信拿图片，再保存到本地或者其他第三方存储。
* 微信获取图片地址：https://api.weixin.qq.com/cgi-bin/media/get?access_token=TOKEN&media_id=$media_id
*/

$data = $this->request->post();

if (isset($data['imgFile']) && !empty($data['imgFile'])) {
    $tmp = [];
    foreach ($data['imgFile'] as $value) {
        // 验证是否新上传，用固定特征词来校验就行
        if (strpos($value, config('qiniu.url')) !== false) {
            $tmp[] = $value;
        } else {
            // TODO:七牛或者其他图床处理，首先需要去微信拿图片。
            $res = (new \qiniuyun\Qiniu)->wxUploadImage($value);
            if ($res) {
                $tmp[] = config('qiniu.url') . $res;
            }
        }
    }

    $data['imgFile'] = json_encode($tmp);
}
```

#### 参数说明
 
| 配置项 | 配置说明 | 必选 | 默认值 |
| --- | --- | --- |  --- | 
| `inputName` |  上传name值 | 是 | |
| `imageUrl` |  已上传的图片连接 | 否 | [] | 
| `title` |  文字描述 | 否 | 图片上传 | 
| `maxNum` |  允许上传图片数量 | 否 | 5 | 
| `error` |  上传失败回调函数 | 否 | | 

#### 本项目参考了下面的项目，在此鸣谢

- [gouguoyin/ajax-image-upload](https://gitee.com/gouguoyin/ajax-image-upload)