Skip to content

Commit d01cfb5

Browse files
listarslevy9527
listars
authored and
levy9527
committed
自定义上传区域 (#3)
* 图片类型文件才可以进行压缩 * 自定义上传区域的slot * 增加story自定义上传例子 * 更新自定义上传区域文档 * update readme * 判断条件调整 * 外部调用时最大张数的判断 * story例子修改 slot-file -> slot-default * 去掉多余api * update readme * 1.1.0 * 1.1.0 打包文件
1 parent 2d81d64 commit d01cfb5

14 files changed

+172
-290
lines changed

‎README.md

+65-12
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22

33
对接阿里云-OSS，可通过环境变量配置 OSS 信息，可自定义域名，支持多选、限制文件大小、删除功能 ，让上传功能更加简单
44

5+
![upload](https://ws1.sinaimg.cn/large/85ed9210gy1fyc3jk0g9qg20dc0ctkjl.jpg)
6+
7+
## Table of Contents
8+
9+
1. **[feature](#feature)**
10+
2. **[documentation](#documentation)**
11+
3. **[install](#install)**
12+
4. **[config](#config)**
13+
5. **[dotenv](#dotenv)**
14+
6. **[example](#example)**
15+
7. **[api](#api)**
16+
8. **[event](#event)**
17+
518
## feature
619

720
* 纯前端实现，不需要后台配合
@@ -10,18 +23,24 @@
1023
* 可拓展自定义 loading 和默认上传样式
1124
* 可限制上传文件大小和上传文件数量
1225

26+
**[⬆ Back to Top](#table-of-contents)**
27+
1328
## documentation
1429

1530
* [full api doc](https://femessage.github.io/upload-to-ali/)
1631
* [online demo](https://femessage.github.io/upload-to-ali/storybook/)
1732

33+
**[⬆ Back to Top](#table-of-contents)**
34+
1835
## install
1936

2037
```sh
2138
# 需要同时安装预览组件
2239
yarn add @femessage/img-preview @femessage/upload-to-ali
2340
```
2441

42+
**[⬆ Back to Top](#table-of-contents)**
43+
2544
## config
2645

2746
使用时组件以下四个参数必传：
@@ -36,6 +55,8 @@ yarn add @femessage/img-preview @femessage/upload-to-ali
3655

3756
[使用前请务必设置跨域 及 ACL](https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.920.9ddd5557vJ6QU7)
3857

58+
**[⬆ Back to Top](#table-of-contents)**
59+
3960
## dotenv
4061

4162
推荐使用环境变量配置 OSS 参数
@@ -64,6 +85,8 @@ OSS_CUSTOM_DOMAIN=cdn.xxx.com
6485

6586
`dotenv` 文档参考 https://www.npmjs.com/package/dotenv
6687

88+
**[⬆ Back to Top](#table-of-contents)**
89+
6790
## example
6891

6992
### 基本上传操作
@@ -236,20 +259,46 @@ export default {
236259
</script>
237260
```
238261

262+
### 自定义上传内容
263+
264+
```vue
265+
<template>
266+
<div class="slot-default">
267+
<h2>自定义上传</h2>
268+
<upload-to-ali v-model="fileUrl" accept="application/pdf">
269+
<button>选择文件</button>
270+
</upload-to-ali>
271+
</div>
272+
</template>
273+
274+
<script>
275+
export default {
276+
name: 'slot-default',
277+
data() {
278+
return {
279+
fileUrl: ''
280+
}
281+
}
282+
}
283+
</script>
284+
```
285+
286+
**[⬆ Back to Top](#table-of-contents)**
287+
239288
## api
240289

241-
| 参数 | 说明 | 类型 | 默认值 |
242-
| --------------- | ---------------------------------- | --------------- | ----------------------- |
243-
| value | 绑定值(支持 v-model) | String / Number | - |
244-
| multiple | 是否多选 | Boolean | false |
245-
| max | 上传最大数量 | Number | 9 |
246-
| size | 上传大小限制(单位:KB) | Number | 1024 |
247-
| disabled | 是否禁用 | Boolean | false |
248-
| canDelete | 是否显示删除图标 | Boolean | false |
249-
| compressOptions | 压缩参数 | Object | {maxWidth: 750} |
250-
| uploadOptions | 上传参数 | Object | {partSize: 100 \* 1024} |
251-
| preview | 是否开启预览功能 | Boolean | true |
252-
| onClick | 点击事件, 返回参数为当前点击的 url | Function | - |
290+
| 参数 | 说明 | 类型 | 默认值 |
291+
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | ------------------------------------------- |
292+
| value | 绑定值(支持 v-model) | String / Number | - |
293+
| multiple | 是否多选 | Boolean | false |
294+
| max | 上传最大数量 | Number | 9 |
295+
| size | 上传大小限制(单位:KB) | Number | 1024 |
296+
| disabled | 是否禁用 | Boolean | fals |
297+
| compressOptions | 压缩参数 | Object | {maxWidth: 750} |
298+
| uploadOptions | 上传参数 | Object | {partSize: 100 \* 1024} |
299+
| preview | 是否开启预览功能 | Boolean | true |
300+
| onClick | 点击事件, 返回参数为当前点击的 url | Function | - |
301+
| accept | 接受上传的文件类型, 多个值逗号分隔, 默认只接受图片，其他文件类型可以参考[MIME 类型列表](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types) | String | image/png, image/jpeg, image/gif, image/jpg |
253302

254303
### 压缩参数 compressOptions
255304

@@ -263,6 +312,8 @@ export default {
263312

264313
* selectFiles 手动触发选择文件事件
265314

315+
**[⬆ Back to Top](#table-of-contents)**
316+
266317
## event
267318

268319
`@loaded` - 上传完成后触发的事件
@@ -283,3 +334,5 @@ multiple模式返回（全部的文件列表[Array]，上传文件列表[Array]
283334
`@fail` - 上传失败事件
284335

285336
`@cancel` - 上传操作被取消事件
337+
338+
**[⬆ Back to Top](#table-of-contents)**

‎dist/upload-to-ali.esm.js

+24-30
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,16 @@ var imageCompressor = new ImageCompressor();
2020

2121
var doubleSlash = '//';
2222
var oneKB = 1024;
23+
var image = 'image';
2324

2425
var Component = { render: function render() {
25-
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "upload-to-oss" }, [_vm._l(_vm.uploadList, function (imgUrl, index) {
26+
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "upload-to-oss" }, [!_vm.$slots.default ? _vm._l(_vm.uploadList, function (imgUrl, index) {
2627
return _c('div', { key: index, staticClass: "upload-item", class: { 'is-preview': _vm.preview } }, [!_vm.disabled ? _c('i', { staticClass: "upload-del-icon", on: { "click": function click($event) {
2728
$event.stopPropagation();$event.preventDefault();_vm.onDelete(imgUrl, index);
2829
} } }) : _vm._e(), _vm._v(" "), _c('img', { staticClass: "upload-img", attrs: { "src": imgUrl }, on: { "click": function click($event) {
2930
_vm.onClick(imgUrl);
3031
} } })]);
31-
}), _vm._v(" "), _vm.canUpload ? _c('div', { staticClass: "upload-area", class: { disabled: _vm.disabled }, on: { "click": _vm.selectFiles } }, [_c('div', { staticClass: "upload-box" }, [_vm.uploading ? _vm._t("spinner", [_c('div', { staticClass: "upload-loading" }, [_c('svg', { staticClass: "circular", attrs: { "viewBox": "25 25 50 50" } }, [_c('circle', { staticClass: "path", attrs: { "cx": "50", "cy": "50", "r": "20", "fill": "none" } })])])]) : _vm._t("placeholder", [_c('div', { staticClass: "upload-placeholder" })])], 2)]) : _vm._e(), _vm._v(" "), _c('input', { ref: "uploadInput", staticClass: "upload-input", attrs: { "type": "file", "disabled": _vm.uploading, "hidden": "", "accept": _vm.accept, "multiple": _vm.multiple }, on: { "change": _vm.upload } }), _vm._v(" "), _vm.preview ? _c('img-preview', { model: { value: _vm.previewUrl, callback: function callback($$v) {
32+
}) : _vm._e(), _vm._v(" "), _vm.canUpload ? _c('div', { staticClass: "upload-area", class: { disabled: _vm.disabled }, on: { "click": _vm.selectFiles } }, [_vm._t("default", [_c('div', { staticClass: "upload-box" }, [_vm.uploading ? _vm._t("spinner", [_c('div', { staticClass: "upload-loading" }, [_c('svg', { staticClass: "circular", attrs: { "viewBox": "25 25 50 50" } }, [_c('circle', { staticClass: "path", attrs: { "cx": "50", "cy": "50", "r": "20", "fill": "none" } })])])]) : _vm._t("placeholder", [_c('div', { staticClass: "upload-placeholder" })])], 2)])], 2) : _vm._e(), _vm._v(" "), _c('input', { ref: "uploadInput", staticClass: "upload-input", attrs: { "type": "file", "disabled": _vm.uploading, "hidden": "", "accept": _vm.accept, "multiple": _vm.multiple }, on: { "change": _vm.upload } }), _vm._v(" "), _vm.preview ? _c('img-preview', { model: { value: _vm.previewUrl, callback: function callback($$v) {
3233
_vm.previewUrl = $$v;
3334
}, expression: "previewUrl" } }) : _vm._e()], 2);
3435
}, staticRenderFns: [],
@@ -117,30 +118,13 @@ var Component = { render: function render() {
117118
type: Number,
118119
default: 0
119120
},
120-
/**
121-
* 上传文件类型
122-
* 默认 img
123-
* 可选 file
124-
*/
125-
type: {
126-
type: String,
127-
default: 'img'
128-
},
129121
/**
130122
* 是否禁用。若为true，则不能上传
131123
*/
132124
disabled: {
133125
type: Boolean,
134126
default: false
135127
},
136-
/**
137-
* 是否显示删除图标。
138-
* 默认为false，不展示
139-
*/
140-
canDelete: {
141-
type: Boolean,
142-
default: false
143-
},
144128
/**
145129
* 允许上传的最大数量
146130
*/
@@ -241,6 +225,10 @@ var Component = { render: function render() {
241225
this.$emit('delete', url, index);
242226
},
243227
selectFiles: function selectFiles() {
228+
if (!this.canUpload) {
229+
alert('已达到上传的最大数量');
230+
return;
231+
}
244232
this.$refs.uploadInput.click();
245233
},
246234
upload: function () {
@@ -295,7 +283,7 @@ var Component = { render: function render() {
295283

296284
case 13:
297285
if (!(i < files.length)) {
298-
_context.next = 33;
286+
_context.next = 34;
299287
break;
300288
}
301289

@@ -304,7 +292,7 @@ var Component = { render: function render() {
304292
break;
305293
}
306294

307-
return _context.abrupt('break', 33);
295+
return _context.abrupt('break', 34);
308296

309297
case 16:
310298
file = files[i];
@@ -318,12 +306,18 @@ var Component = { render: function render() {
318306

319307
this.$emit('loading', name);
320308

321-
_context.next = 22;
309+
if (!(file.type.indexOf(image) > -1)) {
310+
_context.next = 24;
311+
break;
312+
}
313+
314+
_context.next = 23;
322315
return imageCompressor.compress(file, this.compressOptions);
323316

324-
case 22:
317+
case 23:
325318
file = _context.sent;
326319

320+
case 24:
327321

328322
//文件名-时间戳 作为上传文件key
329323
pos = name.lastIndexOf('.');
@@ -335,7 +329,7 @@ var Component = { render: function render() {
335329

336330
key = name.substring(0, pos) + '-' + new Date().getTime() + suffix;
337331

338-
_context.next = 29;
332+
_context.next = 30;
339333
return this.client.multipartUpload(this.dir + key, file, this.uploadOptions).then(function (res) {
340334
// 协议无关
341335
var filename = doubleSlash;
@@ -373,30 +367,30 @@ var Component = { render: function render() {
373367
}
374368
});
375369

376-
case 29:
370+
case 30:
377371

378372
this.newClient();
379373

380-
case 30:
374+
case 31:
381375
i++;
382376
_context.next = 13;
383377
break;
384378

385-
case 33:
379+
case 34:
386380

387381
reset();
388382
this.uploading = false;
389383

390384
// 没有一张上传成功的，不触发load事件
391385

392386
if (!(currentUploads.length < 1)) {
393-
_context.next = 37;
387+
_context.next = 38;
394388
break;
395389
}
396390

397391
return _context.abrupt('return');
398392

399-
case 37:
393+
case 38:
400394

401395
/**
402396
* 上传完成后触发的事件,返回url
@@ -410,7 +404,7 @@ var Component = { render: function render() {
410404
this.$emit('loaded', currentUploads[0]);
411405
}
412406

413-
case 38:
407+
case 39:
414408
case 'end':
415409
return _context.stop();
416410
}

0 commit comments

Comments
 (0)