leiyun
/
ai_uniapp_v2
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
10 Commit
1 Ramo (Branch)
4.2 MiB
 
 
 
Ramo (Branch): main
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da 'main'
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-upload/u-upload.vue

963 righe
30 KiB
Originale Permalink Blame Cronologia 

  1. <template>

  2. 	<view class="u-upload" :style="[addStyle(customStyle)]">

  3. 		<view class="u-upload__wrap" >

  4. 			<template v-if="previewImage">

  5. 				<view

  6. 				    class="u-upload__wrap__preview"

  7. 				    v-for="(item, index) in lists"

  8. 				    :key="index"

  9. 				>

  10. 					<image

  11. 					    v-if="(item.isImage || (item.type && item.type === 'image')) && (item.thumb || item.url)"

  12. 					    :src="item.thumb || item.url"

  13. 					    :mode="imageMode"

  14. 					    class="u-upload__wrap__preview__image"

  15. 					    @tap="onClickPreview(item, index)"

  16. 						:style="[{

  17. 							width: addUnit(width),

  18. 							height: addUnit(height),

  19. 							backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(242, 242, 242)'),

  20. 							borderColor: upThemeVar('--up-border-color', '#e5e7eb'),

  21. 							borderWidth: '1px',

  22. 							borderStyle: 'solid'

  23. 						}]"

  24. 					/>

  25. 					<view class="u-upload__wrap__preview__video"

  26. 						:style="{

  27. 							width: addUnit(width),

  28. 							height: addUnit(height),

  29. 							backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(242, 242, 242)'),

  30. 							borderColor: upThemeVar('--up-border-color', '#e5e7eb'),

  31. 							borderWidth: '1px',

  32. 							borderStyle: 'solid'

  33. 						}"

  34. 						v-else-if="(item.isVideo || (item.type && item.type === 'video')) && getVideoThumb">

  35. 						<image

  36. 							v-if="item.thumb"

  37. 						    :src="item.thumb"

  38. 						    :mode="imageMode"

  39. 						    class="u-upload__wrap__preview__image"

  40. 						    @tap="onClickPreview(item, index)"

  41. 							:style="[{

  42. 								width: addUnit(width),

  43. 								height: addUnit(height)

  44. 							}]"

  45. 						/>

  46. 						<up-icon

  47. 							v-else

  48. 						    color="#80CBF9"

  49. 						    size="26"

  50. 						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'file-text'"

  51. 						></up-icon>

  52. 						<view v-if="item.status === 'success'"

  53. 							class="u-upload__wrap__play"

  54. 							@tap="onClickPreview(item, index)">

  55. 							<slot name="playIcon"></slot>

  56. 							<up-icon v-if="!$slots['playIcon']"

  57. 								class="u-upload__wrap__play__icon"

  58. 								name="play-right" size="22px"></up-icon>

  59. 						</view>

  60. 					</view>

  61. 					<view

  62. 					    v-else

  63. 					    class="u-upload__wrap__preview__other"

  64. 						@tap="onClickPreview(item, index)"

  65. 						:style="[{

  66. 							width: addUnit(width),

  67. 							height: addUnit(height),

  68. 							backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(242, 242, 242)'),

  69. 							borderColor: upThemeVar('--up-border-color', '#e5e7eb'),

  70. 							borderWidth: '1px',

  71. 							borderStyle: 'solid'

  72. 						}]"

  73. 					>

  74. 						<up-icon

  75. 						    color="#80CBF9"

  76. 						    size="26"

  77. 						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"

  78. 						></up-icon>

  79. 						<text class="u-upload__wrap__preview__other__text">

  80. 							{{item.isVideo || (item.type && item.type === 'video') ? item.name || t("up.common.video") : item.name || t("up.common.file")}}

  81. 						</text>

  82. 					</view>

  83. 					<view

  84. 					    class="u-upload__status"

  85. 					    v-if="item.status === 'uploading' || item.status === 'failed'"

  86. 					>

  87. 						<view class="u-upload__status__icon">

  88. 							<up-icon

  89. 							    v-if="item.status === 'failed'"

  90. 							    name="close-circle"

  91. 							    color="#ffffff"

  92. 							    size="25"

  93. 							/>

  94. 							<u-loading-icon

  95. 							    size="22"

  96. 							    mode="circle"

  97. 							    v-else

  98. 							/>

  99. 						</view>

  100. 						<text

  101. 						    v-if="item.message"

  102. 						    class="u-upload__status__message"

  103. 						>{{ item.message }}</text>

  104. 						<up-gap class="u-upload__progress" height="3px"

  105. 							:style="{width: item.progress + '%'}"></up-gap>

  106. 					</view>

  107. 					<view

  108. 					    class="u-upload__deletable"

  109. 					    v-if="item.status !== 'uploading' && (deletable || item.deletable)"

  110. 					    @tap.stop="deleteItem(index)"

  111. 					>

  112. 						<view class="u-upload__deletable__icon">

  113. 							<up-icon

  114. 							    name="close"

  115. 							    color="#ffffff"

  116. 							    size="10"

  117. 							></up-icon>

  118. 						</view>

  119. 					</view>

  120. 					<slot name="success">

  121. 						<view

  122. 							class="u-upload__success"

  123. 							v-if="item.status === 'success'"

  124. 						>

  125. 							<!-- #ifdef APP-NVUE -->

  126. 							<image

  127. 								:src="successIcon"

  128. 								class="u-upload__success__icon"

  129. 							></image>

  130. 							<!-- #endif -->

  131. 							<!-- #ifndef APP-NVUE -->

  132. 							<view class="u-upload__success__icon">

  133. 								<up-icon

  134. 									name="checkmark"

  135. 									color="#ffffff"

  136. 									size="12"

  137. 								></up-icon>

  138. 							</view>

  139. 							<!-- #endif -->

  140. 						</view>

  141. 					</slot>

  142. 				</view>

  143. 			</template>

  144. 			<up-canvas

  145. 				ref="videoThumbCanvas"

  146. 				class="u-upload__hidden-canvas"

  147. 				:canvas-id="videoThumbCanvasId"

  148. 				:width="videoThumbCanvasWidth"

  149. 				:height="videoThumbCanvasHeight"

  150. 				bg-color="transparent"

  151. 			></up-canvas>

  152. 			<template v-if="isInCount">

  153. 				<view

  154. 				    v-if="$slots.trigger"

  155. 				    @tap="chooseFile"

  156. 				>

  157. 					<slot name="trigger" />

  158. 				</view>

  159. 				<view

  160. 				    v-else-if="!$slots.trigger && ($slots.default || $slots.$default)"

  161. 				    @tap="chooseFile"

  162. 				>

  163. 					<slot />

  164. 				</view>

  165. 				<view

  166. 				    v-else

  167. 				    class="u-upload__button"

  168. 				    :hover-class="!disabled ? 'u-upload__button--hover' : ''"

  169. 				    hover-stay-time="150"

  170. 				    @tap="chooseFile"

  171. 				    :class="[disabled && 'u-upload__button--disabled']"

  172. 					:style="[{

  173. 						width: addUnit(width),

  174. 						height: addUnit(height),

  175. 						backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(244, 245, 247)'),

  176. 						borderColor: upThemeVar('--up-border-color', '#e5e7eb'),

  177. 						borderWidth: '1px',

  178. 						borderStyle: 'solid'

  179. 					}]"

  180. 				>

  181. 					<up-icon

  182. 					    :name="uploadIcon"

  183. 					    size="26"

  184. 					    :color="resolvedUploadIconColor"

  185. 					></up-icon>

  186. 					<text

  187. 					    v-if="uploadText"

  188. 					    class="u-upload__button__text"

  189. 						:style="{ color: resolvedUploadTextColor }"

  190. 					>{{ uploadText }}</text>

  191. 				</view>

  192. 			</template>

  193. 		</view>

  194. 		<up-popup

  195. 			mode="center"

  196. 			v-model:show="popupShow">

  197. 			<video id="myVideo" v-if="popupShow"

  198. 				:src="currentItemIndex >= 0 ? lists[currentItemIndex].url : ''"

  199. 				@error="videoErrorCallback" show-center-play-btn

  200. 				:object-fit='videoPreviewObjectFit' show-fullscreen-btn='true'

  201. 				enable-play-gesture controls

  202. 				:autoplay="true" auto-pause-if-open-native

  203. 				@loadedmetadata="loadedVideoMetadata"

  204. 				:initial-time='0.1'>

  205. 			</video>

  206. 		</up-popup>

  207. 	</view>

  208. </template>

  209. 

  210. <script>

  211. 	import {

  212. 		chooseFile

  213. 	} from './utils';

  214. 	import { mixinUpload } from './mixin';

  215. 	import { props } from './props';

  216. 	import { mpMixin } from '../../libs/mixin/mpMixin';

  217. 	import { mixin } from '../../libs/mixin/mixin';

  218. 	import { addStyle, addUnit, toast } from '../../libs/function/index';

  219. 	import test from '../../libs/function/test';

  220. 	import { t } from '../../libs/i18n'

  221. 	/**

  222. 	 * upload 上传

  223. 	 * @description 该组件用于上传图片场景

  224. 	 * @tutorial https://uview-plus.jiangruyi.com/components/upload.html

  225. 	 * @property {String}			accept				接受的文件类型, 可选值为all media image file video （默认 'image' ）

  226. 	 * @property {String | Array}	capture				图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）

  227. 	 * @property {Array}			extension			选择文件的后缀名，暂只支持.zip、.png等，不支持application/msword等值

  228. 	 * @property {Boolean}			compressed			当accept为video时生效，是否压缩视频，默认为true（默认 true ）

  229. 	 * @property {String}			camera				当accept为video时生效，可选值为back或front（默认 'back' ）

  230. 	 * @property {Number}			maxDuration			当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）

  231. 	 * @property {String}			uploadIcon			上传区域的图标，只能内置图标（默认 'camera-fill' ）

  232. 	 * @property {String}			uploadIconColor		上传区域的图标的字体颜色，只能内置图标（默认 #D3D4D6 ）

  233. 	 * @property {Boolean}			useBeforeRead		是否开启文件读取前事件（默认 false ）

  234. 	 * @property {Boolean}			previewFullImage	是否显示组件自带的图片预览功能（默认 true ）

  235. 	 * @property {String | Number}	maxCount			最大上传数量（默认 52 ）

  236. 	 * @property {Boolean}			disabled			是否启用（默认 false ）

  237. 	 * @property {String}			imageMode			预览上传的图片时的裁剪模式，和image组件mode属性一致（默认 'aspectFill' ）

  238. 	 * @property {String}			name				标识符，可以在回调函数的第二项参数中获取

  239. 	 * @property {Array}			sizeType			所选的图片的尺寸, 可选值为original compressed（默认 ['original', 'compressed'] ）

  240. 	 * @property {Boolean}			multiple			是否开启图片多选，部分安卓机型不支持 （默认 false ）

  241. 	 * @property {Boolean}			deletable			是否展示删除按钮（默认 true ）

  242. 	 * @property {String | Number}	maxSize				文件大小限制，单位为byte （默认 Number.MAX_VALUE ）

  243. 	 * @property {Array}			fileList			显示已上传的文件列表

  244. 	 * @property {String}			uploadText			上传区域的提示文字

  245. 	 * @property {String | Number}	width				内部预览图片区域和选择图片按钮的区域宽度（默认 80 ）

  246. 	 * @property {String | Number}	height				内部预览图片区域和选择图片按钮的区域高度（默认 80 ）

  247. 	 * @property {Object}			customStyle			组件的样式，对象形式

  248. 	 * @event {Function} afterRead		读取后的处理函数

  249. 	 * @event {Function} beforeRead		读取前的处理函数

  250. 	 * @event {Function} oversize		文件超出大小限制

  251. 	 * @event {Function} clickPreview	点击预览图片

  252. 	 * @event {Function} delete 		删除图片

  253. 	 * @example <u-upload :action="action" :fileList="fileList" ></u-upload>

  254. 	 */

  255. 	export default {

  256. 		name: "u-upload",

  257. 		mixins: [mpMixin, mixin, mixinUpload, props],

  258. 		data() {

  259. 			return {

  260. 				// #ifdef APP-NVUE

  261. 				successIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII=',

  262. 				// #endif

  263. 				lists: [],

  264. 				isInCount: true,

  265. 				popupShow: false,

  266. 				currentItemIndex: -1,

  267. 				videoThumbCanvasId: 'u-upload-video-thumb-' + Math.random().toString(36).substr(2, 9),

  268. 				videoThumbCanvasWidth: 100,

  269. 				videoThumbCanvasHeight: 150

  270. 			}

  271. 		},

  272. 		watch: {

  273. 			// 监听文件列表的变化，重新整理内部数据

  274. 			fileList: {

  275. 				handler() {

  276. 					this.formatFileList()

  277. 				},

  278. 				immediate: true,

  279. 				deep: true,

  280. 			},

  281. 			deletable(newVal) {

  282. 				this.formatFileList()

  283. 			},

  284. 			maxCount(newVal) {

  285. 				this.formatFileList()

  286. 			},

  287. 			accept(newVal) {

  288. 				this.formatFileList()

  289. 			},

  290. 			popupShow(newVal) {

  291. 				if (!newVal) {

  292. 					this.currentItemIndex = -1;

  293. 				}

  294. 			}

  295. 		},

  296. 		computed: {

  297. 			resolvedUploadIconColor() {

  298. 				if (this.upHasProp('uploadIconColor') || this.uploadIconColor !== '#D3D4D6') {

  299. 					return this.uploadIconColor

  300. 				}

  301. 				return this.upThemeVar('--up-content-color', '#909399')

  302. 			},

  303. 			resolvedUploadTextColor() {

  304. 				return this.upThemeVar('--up-tips-color', '#909399')

  305. 			}

  306. 		},

  307. 		// #ifdef VUE3

  308. 		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],

  309. 		// #endif

  310. 		methods: {

  311. 			t,

  312. 			addUnit,

  313. 			addStyle,

  314. 			videoErrorCallback() {},

  315. 			loadedVideoMetadata(e) {

  316. 				if (this.currentItemIndex < 0) {

  317. 					return;

  318. 				}

  319. 				if (this.autoUploadDriver != 'local') {

  320. 					return;

  321. 				}

  322. 				if (!this.getVideoThumb) {

  323. 					return;

  324. 				}

  325. 				// 截取第一帧作为封面，oss等云存储场景直接使用拼接参数。

  326. 				const w = this.lists[this.currentItemIndex].width;

  327. 				const h = this.lists[this.currentItemIndex].height;

  328. 				const dpr = uni.getSystemInfoSync().pixelRatio;

  329. 				uni.createSelectorQuery().select('#myVideo').context(res => {

  330. 					console.log('select video', res)

  331. 					const myVideo = res.context

  332. 					this.videoThumbCanvasWidth = w

  333. 					this.videoThumbCanvasHeight = h

  334. 					this.$nextTick(async () => {

  335. 						const canvas = this.$refs.videoThumbCanvas

  336. 						if (!canvas || !myVideo) return

  337. 						await canvas.initCanvas(true)

  338. 						const ctx1 = canvas.getRawContext()

  339. 						if (!ctx1) return

  340. 						setTimeout(async () => {

  341. 							try {

  342. 								ctx1.drawImage(myVideo, 0, 0, w, h)

  343. 								const result = await canvas.toTempFilePath({

  344. 									width: w,

  345. 									height: h,

  346. 									destWidth: w * dpr,

  347. 									destHeight: h * dpr

  348. 								})

  349. 								console.log('First frame image path:', result.tempFilePath)

  350. 								this.fileList[this.currentItemIndex].thumb = result.tempFilePath

  351. 								this.$emit('update:fileList', this.fileList)

  352. 							} catch (err) {

  353. 								console.error('Failed to export image:', err)

  354. 							}

  355. 						}, 500)

  356. 					})

  357. 				}).exec()

  358. 			},

  359. 			formatFileList() {

  360. 				const {

  361. 					fileList = [], maxCount

  362. 				} = this;

  363. 				const lists = fileList.map((item) => {

  364. 					const name = item.name || item.url || item.thumb

  365. 					return Object.assign(Object.assign({}, item), {

  366. 						// 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理

  367. 						isImage: item.name ? test.image(item.name) : (this.accept === 'image' || test.image(name)),

  368. 						isVideo: item.name ? test.video(item.name) : (this.accept === 'video' || test.video(name)),

  369. 						deletable: typeof item.deletable === 'boolean' ? item.deletable : this.deletable,

  370. 					})

  371. 				});

  372. 				this.lists = lists

  373. 				this.isInCount = lists.length < maxCount

  374. 			},

  375. 			chooseFile(params) {

  376. 				const {

  377. 					maxCount,

  378. 					multiple,

  379. 					lists,

  380. 					disabled

  381. 				} = this;

  382. 				if (disabled) return Promise.reject();

  383. 				const chooseParams = Object.assign({

  384. 					accept: this.accept,

  385. 					extension: this.extension,

  386. 					multiple: this.multiple,

  387. 					capture: this.capture,

  388. 					compressed: this.compressed,

  389. 					maxDuration: this.maxDuration,

  390. 					sizeType: this.sizeType,

  391. 					camera: this.camera,

  392. 				}, {

  393. 					maxCount: maxCount - lists.length,

  394. 					...params

  395. 				})

  396. 				return chooseFile(chooseParams)

  397. 					.then((res) => {

  398. 						const result = chooseParams.multiple ? res : res[0]

  399. 						this.onBeforeRead(result);

  400. 						return result

  401. 					})

  402. 					.catch((error) => {

  403. 						this.$emit('error', error);

  404. 					});

  405. 			},

  406. 			// 文件读取之前

  407. 			onBeforeRead(file) {

  408. 				const {

  409. 					beforeRead,

  410. 					useBeforeRead,

  411. 				} = this;

  412. 				let res = file

  413. 				// beforeRead是否为一个方法

  414. 				if (test.func(beforeRead)) {

  415. 					// 如果用户定义了此方法，则去执行此方法，并传入读取的文件回调

  416. 					res = beforeRead(file, this.getDetail());

  417. 				}

  418. 				if (useBeforeRead) {

  419. 					res = new Promise((resolve, reject) => {

  420. 						this.$emit(

  421. 							'beforeRead',

  422. 							Object.assign(Object.assign({

  423. 								file

  424. 							}, this.getDetail()), {

  425. 								callback: (ok) => {

  426. 									ok ? resolve() : reject();

  427. 								},

  428. 							})

  429. 						);

  430. 					});

  431. 				}

  432. 				if (test.promise(res)) {

  433. 					res.then((data) => this.onAfterRead(data || file));

  434. 				} else {

  435. 					this.onAfterRead(res || file);

  436. 				}

  437. 			},

  438. 			getDetail(index) {

  439. 				return {

  440. 					name: this.name,

  441. 					index: index == null ? this.fileList.length : index,

  442. 				};

  443. 			},

  444. 			async onAfterRead(file) {

  445. 				const {

  446. 					maxSize,

  447. 					afterRead

  448. 				} = this;

  449. 				const oversize = Array.isArray(file) ?

  450. 					file.some((item) => item.size > maxSize) :

  451. 					file.size > maxSize;

  452. 				if (oversize) {

  453. 					uni.showToast({

  454. 						title: t("up.upload.sizeExceed")

  455. 					})

  456. 					this.$emit('oversize', Object.assign({

  457. 						file

  458. 					}, this.getDetail()));

  459. 					return;

  460. 				}

  461. 				let len = this.fileList.length;

  462. 				if (this.autoUpload) {

  463. 					// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  464. 					let lists = [].concat(file);

  465. 					let fileListLen = this.fileList.length;

  466. 					lists.map((item) => {

  467. 						this.fileList.push({

  468. 							...item,

  469. 							status: 'uploading',

  470. 							message: t("up.upload.uploading"),

  471. 							progress: 0

  472. 						});

  473. 					});

  474. 					let that = this;

  475. 					this.$emit('update:fileList', this.fileList);

  476. 					for (let i = 0; i < lists.length; i++) {

  477. 						let j = i;

  478. 						let result = '';

  479. 						switch(this.autoUploadDriver) {

  480. 							case 'cos': // 腾讯云

  481. 								break;

  482. 							case 'kodo': // 七牛云

  483. 								break;

  484. 							case 'oss':

  485. 							case 'upload_oss':

  486. 								// 阿里云前端直传

  487. 								// 获取签名

  488. 								console.log()

  489. 								let formData = {};

  490. 								let ret = await uni.request({

  491. 									url: this.autoUploadAuthUrl,

  492. 									method: 'get',

  493. 									header: this.autoUploadHeader,

  494. 									data: {

  495. 										filename: lists[j].name

  496. 									}

  497. 								});

  498. 								// console.log(ret);

  499. 								let res0 = ret.data;

  500. 								if (res0.code == 200) {

  501. 									// 路径 + 文件名 + 扩展名

  502. 									// 不传递filename就要拼接key

  503. 									// res0.data.params.key = res0.data.params.dir + res0.data.params.uniqidName + fileExt;

  504. 									formData = res0.data.params;

  505. 								} else {

  506. 									uni.showToast({

  507. 										title: res0.msg,

  508. 										duration: 1500

  509. 									});

  510. 									return;

  511. 								}

  512. 								var uploadTask = uni.uploadFile({

  513. 									url: res0.data.params.host,

  514. 									filePath: lists[j].url,

  515. 									name: 'file',

  516. 									// fileType: 'video', // 仅支付宝小程序，且必填。

  517. 									// header: header,

  518. 									formData: formData,

  519. 									success: (uploadFileRes) => {

  520. 										let thumb = '';

  521. 										let afterPromise = '';

  522. 										if (that.customAfterAutoUpload) {

  523. 											afterPromise = new Promise((resolve, reject) => {

  524. 												that.$emit(

  525. 													'afterAutoUpload',

  526. 													Object.assign(res0, {

  527. 														callback: (r) => {

  528. 															r.url ? resolve(r) : reject();

  529. 														},

  530. 													})

  531. 												);

  532. 											});

  533. 										}

  534. 										if (test.promise(afterPromise)) {

  535. 											afterPromise.then((data) => that.succcessUpload(len + j, data.url, data.thumb));

  536. 										} else {

  537. 											result = res0.data.params.host + '/' + res0.data.params.key;

  538. 											if (that.accept === 'video' || test.video(result)) {

  539. 												thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast';

  540. 											}

  541. 											that.succcessUpload(len + j, result, thumb);

  542. 										}

  543. 									}

  544. 								});

  545. 								uploadTask.onProgressUpdate((res) => {

  546. 									that.updateUpload(len + j, {

  547. 										progress: res.progress

  548. 									});

  549. 									// console.log('上传进度' + res.progress);

  550. 									// console.log('已经上传的数据长度' + res.totalBytesSent);

  551. 									// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

  552. 								});

  553. 								break;

  554. 							case 'local':

  555. 							default:

  556. 								// 服务器本机上传

  557. 								var uploadTask = uni.uploadFile({

  558. 									url: this.autoUploadApi,

  559. 									filePath: lists[j].url,

  560. 									name: 'file',

  561. 									// fileType: 'video', // 仅支付宝小程序，且必填。

  562. 									header: this.autoUploadHeader,

  563. 									success: (uploadFileRes) => {

  564. 										let res0 = uploadFileRes.data;

  565. 										let afterPromise = '';

  566. 										if (that.customAfterAutoUpload) {

  567. 											afterPromise = new Promise((resolve, reject) => {

  568. 												that.$emit(

  569. 													'afterAutoUpload',

  570. 													Object.assign(res0, {

  571. 														callback: (r) => {

  572. 															r.url ? resolve(r) : reject();

  573. 														}

  574. 													})

  575. 												);

  576. 											});

  577. 										}

  578. 										if (test.promise(afterPromise)) {

  579. 											afterPromise.then((data) => that.succcessUpload(len + j, data.url));

  580. 										} else {

  581. 											if (res0.code != 200) {

  582. 												uni.showToast({

  583. 													title: res0.msg

  584. 												});

  585. 											} else {

  586. 												result = res0.data.url;

  587. 												that.succcessUpload(len + j, result);

  588. 											}

  589. 										}

  590. 									}

  591. 								});

  592. 								uploadTask.onProgressUpdate((res) => {

  593. 									that.updateUpload(len + j, {

  594. 										progress: res.progress

  595. 									});

  596. 									// console.log('上传进度' + res.progress);

  597. 									// console.log('已经上传的数据长度' + res.totalBytesSent);

  598. 									// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

  599. 								});

  600. 								break;

  601. 						}

  602. 					}

  603. 				} else {

  604. 					if (typeof afterRead === 'function') {

  605. 						afterRead(file, this.getDetail());

  606. 					}

  607. 					this.$emit('afterRead', Object.assign({

  608. 						file

  609. 					}, this.getDetail()));

  610. 				}

  611. 			},

  612. 			updateUpload(index, param) {

  613. 				let item = this.fileList[index];

  614. 				this.fileList.splice(index, 1, {

  615. 					...item,

  616. 					// 注意这里不判断会出现succcessUpload先执行又被覆盖的问题

  617. 					status: param.progress == 100 ? 'success' : 'uploading',

  618. 					message: '',

  619. 					progress: param.progress

  620. 				});

  621. 				this.$emit('update:fileList', this.fileList);

  622. 			},

  623. 			succcessUpload(index, url, thumb = '') {

  624. 				let item = this.fileList[index];

  625. 				this.fileList.splice(index, 1, {

  626. 					...item,

  627. 					status: 'success',

  628. 					message: '',

  629. 					url: url,

  630. 					progress: 100,

  631. 					thumb: thumb

  632. 				});

  633. 				this.$emit('update:fileList', this.fileList);

  634. 			},

  635. 			deleteItem(index) {

  636. 				if (this.autoDelete) {

  637. 					this.fileList.splice(index, 1);

  638. 					this.$emit('update:fileList', this.fileList);

  639. 				} else {

  640. 					this.$emit(

  641. 						'delete',

  642. 						Object.assign(Object.assign({}, this.getDetail(index)), {

  643. 							file: this.fileList[index],

  644. 						})

  645. 					);

  646. 				}

  647. 			},

  648. 			// 预览图片

  649. 			onPreviewImage(previewItem, index) {

  650. 				if (!previewItem.isImage || !this.previewFullImage) return

  651.                 let current = 0;

  652.                 const urls = [];

  653.                 let imageIndex = 0;

  654.                 for (var i = 0; i < this.lists.length; i++) {

  655.                     const item = this.lists[i];

  656.                     if (item.isImage || (item.type && item.type === 'image')) {

  657.                         urls.push(item.url || item.thumb);

  658.                         if (i === index) {

  659.                             current = imageIndex;

  660.                         }

  661.                         imageIndex += 1;

  662.                     }

  663.                 }

  664.                 if (urls.length < 1) {

  665.                     return;

  666.                 }

  667. 				uni.previewImage({

  668.                     urls: urls,

  669.                     current: current,

  670. 					fail() {

  671. 						toast(t("up.upload.previewImageFail"))

  672. 					},

  673. 				});

  674. 			},

  675. 			onPreviewVideo(previewItem, index) {

  676. 				if (!this.previewFullImage) return;

  677.                 let current = 0;

  678.                 const sources = [];

  679.                 let videoIndex = 0;

  680.                 for (var i = 0; i < this.lists.length; i++) {

  681.                     const item = this.lists[i];

  682.                     if (item.isVideo || (item.type && item.type === 'video')) {

  683.                         sources.push(Object.assign(Object.assign({}, item), {

  684.                             type: 'video'

  685.                         }));

  686.                         if (i === index) {

  687.                             current = videoIndex;

  688.                         }

  689.                         videoIndex += 1;

  690.                     }

  691.                 }

  692.                 if (sources.length < 1) {

  693.                     return;

  694.                 }

  695. 				// #ifndef MP-WEIXIN

  696. 				this.popupShow = true;

  697. 				this.currentItemIndex = index;

  698. 				console.log(this.lists[this.currentItemIndex])

  699. 				// #endif

  700. 				// #ifdef MP-WEIXIN

  701. 				wx.previewMedia({

  702. 					sources: sources,

  703. 					current: current,

  704. 					fail() {

  705. 						toast(t("up.upload.previewVideoFail"))

  706. 					},

  707. 				});

  708. 				// #endif

  709. 			},

  710. 			onClickPreview(item, index) {

  711. 				if (this.previewFullImage) {

  712. 					switch (item.type) {

  713. 						case 'image':

  714. 							this.onPreviewImage(item, index);

  715. 							break;

  716. 						case 'video':

  717. 							this.onPreviewVideo(item, index);

  718. 							break;

  719. 						default:

  720. 							break;

  721. 					}

  722. 				}

  723. 				this.$emit(

  724. 					'clickPreview',

  725. 					Object.assign(Object.assign({}, item), this.getDetail(index))

  726. 				);

  727. 			}

  728. 		}

  729. 	}

  730. </script>

  731. 

  732. <style lang="scss" scoped>

  733. 	$u-upload-preview-border-radius: 2px !default;

  734. 	$u-upload-preview-margin: 0 8px 8px 0 !default;

  735. 	$u-upload-image-width:80px !default;

  736. 	$u-upload-image-height:$u-upload-image-width;

  737. 	$u-upload-other-bgColor: rgb(242, 242, 242) !default;

  738. 	$u-upload-other-flex:1 !default;

  739. 	$u-upload-text-font-size:11px !default;

  740. 	$u-upload-text-color:$u-tips-color !default;

  741. 	$u-upload-text-margin-top:2px !default;

  742. 	$u-upload-deletable-right:0 !default;

  743. 	$u-upload-deletable-top:0 !default;

  744. 	$u-upload-deletable-bgColor:rgb(55, 55, 55) !default;

  745. 	$u-upload-deletable-height:14px !default;

  746. 	$u-upload-deletable-width:$u-upload-deletable-height;

  747. 	$u-upload-deletable-boder-bottom-left-radius:100px !default;

  748. 	$u-upload-deletable-zIndex:3 !default;

  749. 	$u-upload-success-bottom:0 !default;

  750. 	$u-upload-success-right:0 !default;

  751. 	$u-upload-success-border-style:solid !default;

  752. 	$u-upload-success-border-top-color:transparent !default;

  753. 	$u-upload-success-border-left-color:transparent !default;

  754. 	$u-upload-success-border-bottom-color: $u-success !default;

  755. 	$u-upload-success-border-right-color:$u-upload-success-border-bottom-color;

  756. 	$u-upload-success-border-width:9px !default;

  757. 	$u-upload-icon-top:0px !default;

  758. 	$u-upload-icon-right:0px !default;

  759. 	$u-upload-icon-h5-top:1px !default;

  760. 	$u-upload-icon-h5-right:0 !default;

  761. 	$u-upload-icon-width:16px !default;

  762. 	$u-upload-icon-height:$u-upload-icon-width;

  763. 	$u-upload-success-icon-bottom:-10px !default;

  764. 	$u-upload-success-icon-right:-10px !default;

  765. 	$u-upload-status-right:0 !default;

  766. 	$u-upload-status-left:0 !default;

  767. 	$u-upload-status-bottom:0 !default;

  768. 	$u-upload-status-top:0 !default;

  769. 	$u-upload-status-bgColor:rgba(0, 0, 0, 0.5) !default;

  770. 	$u-upload-status-icon-Zindex:1 !default;

  771. 	$u-upload-message-font-size:12px !default;

  772. 	$u-upload-message-color:#FFFFFF !default;

  773. 	$u-upload-message-margin-top:5px !default;

  774. 	$u-upload-button-width:80px !default;

  775. 	$u-upload-button-height:$u-upload-button-width;

  776. 	$u-upload-button-bgColor:rgb(244, 245, 247) !default;

  777. 	$u-upload-button-border-radius:2px !default;

  778. 	$u-upload-botton-margin: 0 8px 8px 0 !default;

  779. 	$u-upload-text-font-size:11px !default;

  780. 	$u-upload-text-color:$u-tips-color !default;

  781. 	$u-upload-text-margin-top: 2px !default;

  782. 	$u-upload-hover-bgColor:rgb(230, 231, 233) !default;

  783. 	$u-upload-disabled-opacity:.5 !default;

  784. 

  785. 	.u-upload {

  786. 		@include flex(column);

  787. 		flex: 1;

  788. 

  789. 		&__wrap {

  790. 			@include flex;

  791. 			flex-wrap: wrap;

  792. 			flex: 1;

  793. 

  794. 			&__preview {

  795. 				border-radius: $u-upload-preview-border-radius;

  796. 				margin: $u-upload-preview-margin;

  797. 				position: relative;

  798. 				overflow: hidden;

  799. 				@include flex;

  800. 

  801. 				&__image {

  802. 					width: $u-upload-image-width;

  803. 					height: $u-upload-image-height;

  804. 				}

  805. 

  806. 				&__video,

  807. 				&__other {

  808. 					width: $u-upload-image-width;

  809. 					height: $u-upload-image-height;

  810. 					background-color: $u-upload-other-bgColor;

  811. 					flex: $u-upload-other-flex;

  812. 					@include flex(column);

  813. 					justify-content: center;

  814. 					align-items: center;

  815. 

  816. 					&__text {

  817. 						font-size: $u-upload-text-font-size;

  818. 						color: $u-upload-text-color;

  819. 						margin-top: $u-upload-text-margin-top;

  820. 					}

  821. 				}

  822. 			}

  823. 		}

  824. 

  825. 		&__hidden-canvas {

  826. 			position: fixed;

  827. 			top: -10000px;

  828. 			left: -10000px;

  829. 			z-index: -1;

  830. 		}

  831. 

  832. 		&__wrap__play {

  833. 			position: absolute;

  834. 			top: 0px;

  835. 			left: 0px;

  836. 			bottom: 0px;

  837. 			right: 0px;

  838. 			display: flex;

  839. 			justify-content: center;

  840. 			align-items: center;

  841. 			&__icon {

  842. 				background: #fff;

  843. 				border-radius: 100px;

  844. 				opacity: 0.8;

  845. 			};

  846. 		}

  847. 

  848. 		&__deletable {

  849. 			position: absolute;

  850. 			top: $u-upload-deletable-top;

  851. 			right: $u-upload-deletable-right;

  852. 			background-color: $u-upload-deletable-bgColor;

  853. 			height: $u-upload-deletable-height;

  854. 			width: $u-upload-deletable-width;

  855. 			@include flex;

  856. 			border-bottom-left-radius: $u-upload-deletable-boder-bottom-left-radius;

  857. 			align-items: center;

  858. 			justify-content: center;

  859. 			z-index: $u-upload-deletable-zIndex;

  860. 

  861. 			&__icon {

  862. 				position: absolute;

  863. 				transform: scale(0.7);

  864. 				top: $u-upload-icon-top;

  865. 				right: $u-upload-icon-right;

  866. 				/* #ifdef H5 */

  867. 				top: $u-upload-icon-h5-top;

  868. 				right: $u-upload-icon-h5-right;

  869. 				/* #endif */

  870. 			}

  871. 		}

  872. 

  873. 		&__success {

  874. 			position: absolute;

  875. 			bottom: $u-upload-success-bottom;

  876. 			right: $u-upload-success-right;

  877. 			@include flex;

  878. 			// 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形

  879. 			// 所以在nvue下使用图片，非nvue下使用css实现

  880. 			/* #ifndef APP-NVUE */

  881. 			border-style: $u-upload-success-border-style;

  882. 			border-top-color: $u-upload-success-border-top-color;

  883. 			border-left-color: $u-upload-success-border-left-color;

  884. 			border-bottom-color: $u-upload-success-border-bottom-color;

  885. 			border-right-color: $u-upload-success-border-right-color;

  886. 			border-width: $u-upload-success-border-width;

  887. 			align-items: center;

  888. 			justify-content: center;

  889. 			/* #endif */

  890. 

  891. 			&__icon {

  892. 				/* #ifndef APP-NVUE */

  893. 				position: absolute;

  894. 				transform: scale(0.7);

  895. 				bottom: $u-upload-success-icon-bottom;

  896. 				right: $u-upload-success-icon-right;

  897. 				/* #endif */

  898. 				/* #ifdef APP-NVUE */

  899. 				width: $u-upload-icon-width;

  900. 				height: $u-upload-icon-height;

  901. 				/* #endif */

  902. 			}

  903. 		}

  904. 		&__progress {

  905. 			background-color: $u-primary !important;

  906. 			position: absolute;

  907. 			bottom: 0;

  908. 			left: 0;

  909. 		}

  910. 

  911. 		&__status {

  912. 			position: absolute;

  913. 			top: $u-upload-status-top;

  914. 			bottom: $u-upload-status-bottom;

  915. 			left: $u-upload-status-left;

  916. 			right: $u-upload-status-right;

  917. 			background-color: $u-upload-status-bgColor;

  918. 			@include flex(column);

  919. 			align-items: center;

  920. 			justify-content: center;

  921. 

  922. 			&__icon {

  923. 				position: relative;

  924. 				z-index: $u-upload-status-icon-Zindex;

  925. 			}

  926. 

  927. 			&__message {

  928. 				font-size: $u-upload-message-font-size;

  929. 				color: $u-upload-message-color;

  930. 				margin-top: $u-upload-message-margin-top;

  931. 			}

  932. 		}

  933. 

  934. 		&__button {

  935. 			@include flex(column);

  936. 			align-items: center;

  937. 			justify-content: center;

  938. 			width: $u-upload-button-width;

  939. 			height: $u-upload-button-height;

  940. 			background-color: $u-upload-button-bgColor;

  941. 			border-radius: $u-upload-button-border-radius;

  942. 			margin: $u-upload-botton-margin;

  943. 			/* #ifndef APP-NVUE */

  944. 			box-sizing: border-box;

  945. 			/* #endif */

  946. 

  947. 			&__text {

  948. 				font-size: $u-upload-text-font-size;

  949. 				color: $u-upload-text-color;

  950. 				margin-top: $u-upload-text-margin-top;

  951. 			}

  952. 

  953. 			&--hover {

  954. 				background-color: $u-upload-hover-bgColor;

  955. 			}

  956. 

  957. 			&--disabled {

  958. 				opacity: $u-upload-disabled-opacity;

  959. 			}

  960. 		}

  961. 	}

  962. </style>