@netang/quasar 0.1.58 → 0.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/uploader/index.vue +186 -158
  2. package/components/uploader-query/index.vue +757 -758
  3. package/package.json +1 -1
  4. package/utils/uploader.js +139 -37
package/components/uploader/index.vue CHANGED
@@ -1,158 +1,186 @@
1
- <template>
2
- <div class="n-uploader" v-if="pageStatus === true">
3
-
4
- <!-- 隐藏上传文件输入框 -->
5
- <input
6
- ref="fileRef"
7
- class="hidden"
8
- type="file"
9
- :multiple="count !== 1"
10
- @change="uploader.fileChange"
11
- >
12
-
13
- <!-- 插槽 -->
14
- <slot
15
- :count="count"
16
- :uploader="uploader"
17
- :query="uploadFileLists"
18
- />
19
- </div>
20
- </template>
21
-
22
- <script>
23
- import { onMounted, ref, provide, inject } from 'vue'
24
-
25
- import $n_uploader from '../../utils/uploader'
26
-
27
- import { NPowerKey, NUploaderKey } from '../../utils/symbols'
28
-
29
- export default {
30
-
31
- /**
32
- * 标识
33
- */
34
- name: 'NUploader',
35
-
36
- /**
37
- * 声明属性
38
- */
39
- props: {
40
- // 值
41
- modelValue: [String, Array],
42
- // 上传文件类型, 可选值 file image video audio
43
- type: {
44
- type: String,
45
- validator: v => [ 'file', 'image', 'video', 'audio'].includes(v),
46
- default: 'image',
47
- },
48
- // 上传文件数量(0:不限)
49
- count: {
50
- type: Number,
51
- default: 0,
52
- },
53
- // 单个文件的最大大小(单位: MB)
54
- maxSize: Number,
55
- // 单个文件的限制后缀
56
- exts: Array,
57
- // true: 值格式为数组, 如 ['xxxxxx', 'xxxxxx', 'xxxxxx']
58
- // false: 值格式为字符串, 如 xxxxxx,xxxxxx,xxxxxx
59
- valueArray: Boolean,
60
- // 是否去重
61
- unique: Boolean,
62
- // 是否初始加载文件信息(仅图片有效, 其他类型自动会加载文件信息)
63
- loadInfo: Boolean,
64
- // 单文件上传提示(true: 提示上传替换, false: 不提示直接替换)
65
- confirm: Boolean,
66
- },
67
-
68
- /**
69
- * 声明事件
70
- */
71
- emits: [
72
- 'update:modelValue',
73
- 'update',
74
- ],
75
-
76
- /**
77
- * 组合式
78
- */
79
- setup(props, { emit }) {
80
-
81
- // ==========【数据】============================================================================================
82
-
83
- // 获取权限注入数据
84
- const $power = inject(NPowerKey)
85
-
86
- // 页面状态
87
- const pageStatus = ref(false)
88
-
89
- // 上传文件输入框节点
90
- const fileRef = ref(null)
91
-
92
- // 上传文件列表
93
- const uploadFileLists = ref([])
94
-
95
- // 创建上传器
96
- const uploader = $n_uploader.create({
97
- type: props.type,
98
- // 声明属性
99
- props,
100
- // 上传文件输入框节点
101
- fileRef,
102
- // 上传文件列表
103
- uploadFileLists,
104
- // 更新值方法
105
- onUpdateModelValue({ value }) {
106
- emit('update:modelValue', value)
107
- },
108
- // 更新方法
109
- onUpdate(res) {
110
- emit('update', res)
111
- },
112
- })
113
-
114
- // 更新布局数据
115
- $power.update(function(data) {
116
- data.uploader.push(uploader)
117
- })
118
-
119
- // ==========【注入】=============================================================================================
120
-
121
- provide(NUploaderKey, {
122
- // 声明属性
123
- props,
124
- // 上传器
125
- uploader,
126
- // 文件队列
127
- query: uploadFileLists,
128
- })
129
-
130
- // ==========【生命周期】=========================================================================================
131
-
132
- /**
133
- * 实例被挂载后调用
134
- */
135
- onMounted( async function() {
136
-
137
- // 初始化上传列表
138
- await uploader.initUploadFileLists()
139
-
140
- // 页面状态
141
- pageStatus.value = true
142
- })
143
-
144
- // ==========【返回】=============================================================================================
145
-
146
- return {
147
- // 页面状态
148
- pageStatus,
149
- // 上传文件输入框节点
150
- fileRef,
151
- // 上传文件列表
152
- uploadFileLists,
153
- // 上传器
154
- uploader,
155
- }
156
- },
157
- }
158
- </script>
1
+ <template>
2
+ <div class="n-uploader" v-if="pageStatus === true">
3
+
4
+ <!-- 隐藏上传文件输入框 -->
5
+ <input
6
+ ref="fileRef"
7
+ class="hidden"
8
+ type="file"
9
+ :multiple="count !== 1"
10
+ @change="uploader.fileChange"
11
+ >
12
+
13
+ <!-- 插槽 -->
14
+ <slot
15
+ :count="count"
16
+ :uploader="uploader"
17
+ :query="uploadFileLists"
18
+ />
19
+ </div>
20
+ </template>
21
+
22
+ <script>
23
+ import { onMounted, ref, watch, provide, inject } from 'vue'
24
+
25
+ import $n_uploader from '../../utils/uploader'
26
+
27
+ import { NPowerKey, NUploaderKey } from '../../utils/symbols'
28
+
29
+ export default {
30
+
31
+ /**
32
+ * 标识
33
+ */
34
+ name: 'NUploader',
35
+
36
+ /**
37
+ * 声明属性
38
+ */
39
+ props: {
40
+ // 值
41
+ modelValue: [String, Array],
42
+ // 上传文件类型, 可选值 file image video audio
43
+ type: {
44
+ type: String,
45
+ validator: v => [ 'file', 'image', 'video', 'audio'].includes(v),
46
+ default: 'image',
47
+ },
48
+ // 上传文件数量(0:不限)
49
+ count: {
50
+ type: Number,
51
+ default: 0,
52
+ },
53
+ // 单个文件的最大大小(单位: MB)
54
+ maxSize: Number,
55
+ // 单个文件的限制后缀
56
+ exts: Array,
57
+ // true: 值格式为数组, 如 ['xxxxxx', 'xxxxxx', 'xxxxxx']
58
+ // false: 值格式为字符串, 如 xxxxxx,xxxxxx,xxxxxx
59
+ valueArray: Boolean,
60
+ // 是否去重
61
+ unique: Boolean,
62
+ // 是否初始加载文件信息(仅图片有效, 其他类型自动会加载文件信息)
63
+ loadInfo: Boolean,
64
+ // 单文件上传提示(true: 提示上传替换, false: 不提示直接替换)
65
+ confirm: Boolean,
66
+ },
67
+
68
+ /**
69
+ * 声明事件
70
+ */
71
+ emits: [
72
+ 'update:modelValue',
73
+ 'update',
74
+ ],
75
+
76
+ /**
77
+ * 组合式
78
+ */
79
+ setup(props, { emit }) {
80
+
81
+ // ==========【数据】============================================================================================
82
+
83
+ // 获取权限注入数据
84
+ const $power = inject(NPowerKey)
85
+
86
+ // 页面状态
87
+ const pageStatus = ref(false)
88
+
89
+ // 上传文件输入框节点
90
+ const fileRef = ref(null)
91
+
92
+ // 上传文件列表
93
+ const uploadFileLists = ref([])
94
+
95
+ // 停止观察值
96
+ let stopValueWatcher = false
97
+
98
+ // 创建上传器
99
+ const uploader = $n_uploader.create({
100
+ type: props.type,
101
+ // 声明属性
102
+ props,
103
+ // 上传文件输入框节点
104
+ fileRef,
105
+ // 上传文件列表
106
+ uploadFileLists,
107
+ // 更新值方法
108
+ onUpdateModelValue({ value }) {
109
+ // 停止观察值
110
+ stopValueWatcher = true
111
+ // 触发更新已选数据
112
+ emit('update:modelValue', value)
113
+ },
114
+ // 更新方法
115
+ onUpdate(res) {
116
+ emit('update', res)
117
+ },
118
+ })
119
+
120
+ // 更新布局数据
121
+ $power.update(function(data) {
122
+ data.uploader.push(uploader)
123
+ })
124
+
125
+ // ==========【监听数据】==============================================================================================
126
+
127
+ /**
128
+ * 监听上传文件列表
129
+ */
130
+ watch(()=>props.modelValue, function() {
131
+
132
+ // 如果停止观察值
133
+ if (stopValueWatcher === true) {
134
+ // 取消停止观察值
135
+ stopValueWatcher = false
136
+ return
137
+ }
138
+
139
+ // 初始化上传列表
140
+ uploader.initUploadFileLists()
141
+ .finally()
142
+ }, {
143
+ // 深度监听
144
+ deep: true,
145
+ })
146
+
147
+ // ==========【注入】=============================================================================================
148
+
149
+ provide(NUploaderKey, {
150
+ // 声明属性
151
+ props,
152
+ // 上传器
153
+ uploader,
154
+ // 文件队列
155
+ query: uploadFileLists,
156
+ })
157
+
158
+ // ==========【生命周期】=========================================================================================
159
+
160
+ /**
161
+ * 实例被挂载后调用
162
+ */
163
+ onMounted( async function() {
164
+
165
+ // 初始化上传列表
166
+ await uploader.initUploadFileLists()
167
+
168
+ // 页面状态
169
+ pageStatus.value = true
170
+ })
171
+
172
+ // ==========【返回】=============================================================================================
173
+
174
+ return {
175
+ // 页面状态
176
+ pageStatus,
177
+ // 上传文件输入框节点
178
+ fileRef,
179
+ // 上传文件列表
180
+ uploadFileLists,
181
+ // 上传器
182
+ uploader,
183
+ }
184
+ },
185
+ }
186
+ </script>