更新uni-file-picker

uni_modules/uni-file-picker/changelog.md

-## 1.0.3（2022-12-21）
+## 1.0.11（2024-07-19）
+- 修复 vue3 使用value报错的bug
+## 1.0.10（2024-07-09）
+- 优化 vue3兼容性
+## 1.0.9（2024-07-09）
+- 修复 value 属性不兼容vue3的bug
+## 1.0.8（2024-03-20）
+- 补充 删除文件时返回文件下标
+## 1.0.7（2024-02-21）
+- 新增 微信小程序选择视频时改用chooseMedia,并返回视频缩略图
+## 1.0.6（2024-01-06）
+- 新增 微信小程序不再调用chooseImage,而是调用chooseMedia
+## 1.0.5（2024-01-03）
+- 新增 上传文件至云存储携带本地文件名称
+## 1.0.4（2023-03-29）
+- 修复 手动上传删除一个文件后不能再上传的bug
+## 1.0.3（2022-12-19）
 - 新增 sourceType 属性, 可以自定义图片和视频选择的来源
 ## 1.0.2（2022-07-04）
 - 修复 在uni-forms下样式不生效的bug

uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js

@@ -11,6 +11,28 @@ function chooseImage(opts) {
 		extension
 	} = opts
 	return new Promise((resolve, reject) => {
+		// 微信由于旧接口不再维护，针对微信小程序平台改用chooseMedia接口
+		// #ifdef MP-WEIXIN
+		uni.chooseMedia({
+			count,
+			sizeType,
+			sourceType,
+			mediaType: ['image'],
+			extension,
+			success(res) {
+				res.tempFiles.forEach(item => {
+					item.path = item.tempFilePath;
+				})
+				resolve(normalizeChooseAndUploadFileRes(res, 'image'));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
+				});
+			},
+		})
+		// #endif
+		// #ifndef MP-WEIXIN
 		uni.chooseImage({
 			count,
 			sizeType,
@@ -25,11 +47,14 @@ function chooseImage(opts) {
 				});
 			},
 		});
+		// #endif
+
 	});
 }
 
 function chooseVideo(opts) {
 	const {
+		count,
 		camera,
 		compressed,
 		maxDuration,
@@ -37,6 +62,45 @@ function chooseVideo(opts) {
 		extension
 	} = opts;
 	return new Promise((resolve, reject) => {
+		// 微信由于旧接口不再维护，针对微信小程序平台改用chooseMedia接口
+		// #ifdef MP-WEIXIN
+		uni.chooseMedia({
+			count,
+			compressed,
+			maxDuration,
+			sourceType,
+			extension,
+			mediaType: ['video'],
+			success(res) {
+				const {
+					tempFiles,
+				} = res;
+				resolve(normalizeChooseAndUploadFileRes({
+					errMsg: 'chooseVideo:ok',
+					tempFiles: tempFiles.map(item => {
+						return {
+							name: item.name || '',
+							path: item.tempFilePath,
+							thumbTempFilePath: item.thumbTempFilePath,
+							size:item.size,
+							type: (res.tempFile && res.tempFile.type) || '',
+							width:item.width,
+							height:item.height,
+							duration:item.duration,
+							fileType: 'video',
+							cloudPath: '',
+						}
+					}),
+				}, 'video'));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
+				});
+			},
+		})
+		// #endif
+		// #ifndef MP-WEIXIN
 		uni.chooseVideo({
 			camera,
 			compressed,
@@ -54,8 +118,7 @@ function chooseVideo(opts) {
 				resolve(normalizeChooseAndUploadFileRes({
 					errMsg: 'chooseVideo:ok',
 					tempFilePaths: [tempFilePath],
-					tempFiles: [
-					{
+					tempFiles: [{
 						name: (res.tempFile && res.tempFile.name) || '',
 						path: tempFilePath,
 						size,
@@ -74,6 +137,7 @@ function chooseVideo(opts) {
 				});
 			},
 		});
+		// #endif
 	});
 }
 
@@ -211,8 +275,7 @@ function chooseAndUploadFile(opts = {
 }) {
 	if (opts.type === 'image') {
 		return uploadFiles(chooseImage(opts), opts);
-	}
-	else if (opts.type === 'video') {
+	} else if (opts.type === 'video') {
 		return uploadFiles(chooseVideo(opts), opts);
 	}
 	return uploadFiles(chooseAll(opts), opts);

uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue

@@ -89,24 +89,18 @@
 		},
 		emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
 		props: {
-			// #ifdef VUE3
 			modelValue: {
 				type: [Array, Object],
 				default () {
 					return []
 				}
 			},
-			// #endif
-
-			// #ifndef VUE3
 			value: {
 				type: [Array, Object],
 				default () {
 					return []
 				}
 			},
-			// #endif
-
 			disabled: {
 				type: Boolean,
 				default: false
@@ -191,6 +185,10 @@
 				default () {
 					return  ['album', 'camera']
 				}
+			},
+			provider: {
+				type: String,
+				default: '' // 默认上传到 unicloud 内置存储 extStorage 扩展存储
 			}
 		},
 		data() {
@@ -200,22 +198,18 @@
 			}
 		},
 		watch: {
-			// #ifndef VUE3
 			value: {
 				handler(newVal, oldVal) {
 					this.setValue(newVal, oldVal)
 				},
 				immediate: true
 			},
-			// #endif
-			// #ifdef VUE3
 			modelValue: {
 				handler(newVal, oldVal) {
 					this.setValue(newVal, oldVal)
 				},
 				immediate: true
 			},
-			// #endif
 		},
 		computed: {
 			filesList() {
@@ -331,7 +325,6 @@
 			 * 选择文件
 			 */
 			choose() {
-
 				if (this.disabled) return
 				if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType ===
 					'array') {
@@ -418,6 +411,13 @@
 				if (!this.autoUpload || this.noSpace) {
 					res.tempFiles = []
 				}
+				res.tempFiles.forEach((fileItem, index) => {
+					this.provider && (fileItem.provider = this.provider);
+					const fileNameSplit = fileItem.name.split('.')
+					const ext = fileNameSplit.pop()
+					const fileName = fileNameSplit.join('.').replace(/[\s\/\?<>\\:\*\|":]/g, '_')
+					fileItem.cloudPath = fileName + '_' + Date.now() + '_' + index + '.' + ext
+				})
 			},
 
 			/**
@@ -523,6 +523,7 @@
 			 */
 			delFile(index) {
 				this.$emit('delete', {
+					index,
 					tempFile: this.files[index],
 					tempFilePath: this.files[index].url
 				})

uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue

@@ -24,7 +24,7 @@
 				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
 					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
 					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
-				</view>
+				</view>
 				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
 					点击重试
 				</view>
@@ -69,10 +69,10 @@
 						borderStyle: {}
 					}
 				}
-			},
-			readonly:{
-				type:Boolean,
-				default:false
+			},
+			readonly:{
+				type:Boolean,
+				default:false
 			}
 		},
 		computed: {
@@ -114,7 +114,7 @@
 				let classles = ''
 				for (let i in obj) {
 					classles += `${i}:${obj[i]};`
-				}
+				}
 				return classles
 			},
 			borderLineStyle() {
@@ -133,19 +133,19 @@
 					} else {
 						width = width.indexOf('px') ? width : width + 'px'
 					}
-					obj['border-width'] = width
-
-					if (typeof style === 'number') {
-						style += 'px'
-					} else {
-						style = style.indexOf('px') ? style : style + 'px'
+					obj['border-width'] = width
+
+					if (typeof style === 'number') {
+						style += 'px'
+					} else {
+						style = style.indexOf('px') ? style : style + 'px'
 					}
 					obj['border-top-style'] = style
 				}
 				let classles = ''
 				for (let i in obj) {
 					classles += `${i}:${obj[i]};`
-				}
+				}
 				return classles
 			}
 		},
@@ -176,9 +176,9 @@
 </script>
 
 <style lang="scss">
-	.uni-file-picker__files {
+	.uni-file-picker__files {
 		/* #ifndef APP-NVUE */
-		display: flex;
+		display: flex;
 		/* #endif */
 		flex-direction: column;
 		justify-content: flex-start;
@@ -194,9 +194,9 @@
 		overflow: hidden;
 	}
 
-	.file-picker__mask {
+	.file-picker__mask {
 		/* #ifndef APP-NVUE */
-		display: flex;
+		display: flex;
 		/* #endif */
 		justify-content: center;
 		align-items: center;
@@ -214,9 +214,9 @@
 		position: relative;
 	}
 
-	.uni-file-picker__item {
+	.uni-file-picker__item {
 		/* #ifndef APP-NVUE */
-		display: flex;
+		display: flex;
 		/* #endif */
 		align-items: center;
 		padding: 8px 10px;
@@ -232,17 +232,17 @@
 		flex: 1;
 		font-size: 14px;
 		color: #666;
-		margin-right: 25px;
+		margin-right: 25px;
 		/* #ifndef APP-NVUE */
 		word-break: break-all;
-		word-wrap: break-word;
+		word-wrap: break-word;
 		/* #endif */
 	}
 
-	.icon-files {
+	.icon-files {
 		/* #ifndef APP-NVUE */
 		position: static;
-		background-color: initial;
+		background-color: initial;
 		/* #endif */
 	}
 
@@ -288,10 +288,10 @@
 		transform: rotate(90deg);
 	}
 
-	.icon-del-box {
+	.icon-del-box {
 		/* #ifndef APP-NVUE */
 		display: flex;
-		margin: auto 0;
+		margin: auto 0;
 		/* #endif */
 		align-items: center;
 		justify-content: center;
@@ -322,4 +322,4 @@
 	}
 
 	/* #endif */
-</style>
+</style>

uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue

 <template>
-	<view class="uni-file-picker__container">
-		<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
-			<view class="file-picker__box-content" :style="borderStyle">
+	<view class="uni-file-picker__container">
+		<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
+			<view class="file-picker__box-content" :style="borderStyle">
 				<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
 				<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
 					<view class="icon-del"></view>
@@ -37,10 +37,10 @@
 				default () {
 					return []
 				}
-			},
-			disabled:{
-				type: Boolean,
-				default: false
+			},
+			disabled:{
+				type: Boolean,
+				default: false
 			},
 			disablePreview: {
 				type: Boolean,
@@ -63,10 +63,10 @@
 			delIcon: {
 				type: Boolean,
 				default: true
-			},
-			readonly:{
-				type:Boolean,
-				default:false
+			},
+			readonly:{
+				type:Boolean,
+				default:false
 			}
 		},
 		computed: {
@@ -104,20 +104,20 @@
 					}
 				} else {
 					obj.width = this.value2px(width)
-				}
-
-				let classles = ''
-				for(let i in obj){
-					classles+= `${i}:${obj[i]};`
-				}
+				}
+
+				let classles = ''
+				for(let i in obj){
+					classles+= `${i}:${obj[i]};`
+				}
 				return classles
 			},
 			borderStyle() {
 				let {
 					border
 				} = this.styles
-				let obj = {}
-				const widthDefaultValue = 1
+				let obj = {}
+				const widthDefaultValue = 1
 				const radiusDefaultValue = 3
 				if (typeof border === 'boolean') {
 					obj.border = border ? '1px #eee solid' : 'none'
@@ -132,10 +132,10 @@
 						'border-color': (border && border.color) || '#eee',
 						'border-radius': radius
 					}
-				}
-				let classles = ''
-				for(let i in obj){
-					classles+= `${i}:${obj[i]};`
+				}
+				let classles = ''
+				for(let i in obj){
+					classles+= `${i}:${obj[i]};`
 				}
 				return classles
 			}
@@ -151,11 +151,11 @@
 				this.$emit('delFile', index)
 			},
 			prviewImage(img, index) {
-				let urls = []
-				if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
-					this.$emit("choose")
+				let urls = []
+				if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
+					this.$emit("choose")
 				}
-				if(this.disablePreview) return
+				if(this.disablePreview) return
 				this.filesList.forEach(i => {
 					urls.push(i.url)
 				})
@@ -180,10 +180,10 @@
 </script>
 
 <style lang="scss">
-	.uni-file-picker__container {
+	.uni-file-picker__container {
 		/* #ifndef APP-NVUE */
 		display: flex;
-		box-sizing: border-box;
+		box-sizing: border-box;
 		/* #endif */
 		flex-wrap: wrap;
 		margin: -5px;
@@ -194,9 +194,9 @@
 		// flex: 0 0 33.3%;
 		width: 33.3%;
 		height: 0;
-		padding-top: 33.33%;
+		padding-top: 33.33%;
 		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
+		box-sizing: border-box;
 		/* #endif */
 	}
 
@@ -225,9 +225,9 @@
 		width: 100%;
 	}
 
-	.file-picker__mask {
+	.file-picker__mask {
 		/* #ifndef APP-NVUE */
-		display: flex;
+		display: flex;
 		/* #endif */
 		justify-content: center;
 		align-items: center;
@@ -246,9 +246,9 @@
 		height: 100%;
 	}
 
-	.is-add {
+	.is-add {
 		/* #ifndef APP-NVUE */
-		display: flex;
+		display: flex;
 		/* #endif */
 		align-items: center;
 		justify-content: center;
@@ -266,9 +266,9 @@
 		transform: rotate(90deg);
 	}
 
-	.icon-del-box {
+	.icon-del-box {
 		/* #ifndef APP-NVUE */
-		display: flex;
+		display: flex;
 		/* #endif */
 		align-items: center;
 		justify-content: center;
@@ -289,4 +289,4 @@
 		background-color: #fff;
 		border-radius: 2px;
 	}
-</style>
+</style>

uni_modules/uni-file-picker/components/uni-file-picker/utils.js

@@ -90,6 +90,7 @@ export const get_file_data = async (files, type = 'image') => {
 		extname: extname || '',
 		cloudPath: files.cloudPath,
 		fileType: files.fileType,
+		thumbTempFilePath: files.thumbTempFilePath,
 		url: files.path || files.path,
 		size: files.size, //单位是字节
 		image: {},

uni_modules/uni-file-picker/package.json

 {
   "id": "uni-file-picker",
   "displayName": "uni-file-picker 文件选择上传",
-  "version": "1.0.3",
+  "version": "1.0.11",
   "description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
   "keywords": [
     "uni-ui",
@@ -42,7 +42,8 @@
     "platforms": {
       "cloud": {
         "tcb": "y",
-        "aliyun": "y"
+        "aliyun": "y",
+        "alipay": "n"
       },
       "client": {
         "App": {