【Uniapp】 uni-file-picker组件上传图片或文件大小限制

爱写代码的葡萄

已于 2024-05-11 16:12:33 修改

阅读量4.5k

点赞数 42

文章标签： uni-app

于 2024-05-11 16:07:08 首次发布

本文链接：https://blog.csdn.net/qq_59562332/article/details/138654992

版权

介绍

uni-file-picker文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间。但在开发过程中，我发现官方组件uni-file-picker不能设置单个图片或文件的大小限制，不满足开发需求。以下提供几种解决方案，仅供参考。

方案1：

直接修改源代码，优点是简单容易理解，缺点本处代码修改只能限制图片大小，文件大小限制需要灵活运行，或继续浏览以下方案。

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

根据以上路径，打开choose-and-upload-file.js文件，找到chooseImage方法。新增代码中标注部分，即可实现图片大小限制。

function chooseImage(opts) {
	const {
		count,
		sizeType = ['original', 'compressed'],
		sourceType,
		extension
	} = opts
	return new Promise((resolve, reject) => {
		uni.chooseImage({
			count,
			sizeType,
			sourceType,
			extension,
			success(res) {
                //核心代码
                //--------------------------------------------------------
				const pictureSize = res.tempFiles[0].size / (1024*1024)
				if(pictureSize<1){
					uni.showToast({
						title:'上传图片大小不能超过1M',
						duration:2000,
						icon:"none"
					})
					return
				}
                //---------------------------------------------------------
				resolve(normalizeChooseAndUploadFileRes(res, 'image'));
			},
			fail(res) {
				reject({
					errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
				});
			},
		});
	});
}

方案2：

直接修改源代码，相对方案1更加灵活，复用性较高。

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

根据以上路径，打开uni-file-picker.vue文件。

在props中定义一个属性，用来记录可上传的文件最大值。

props: {
   		maxSize:{
   			type:Number,
   			default:1
   		}
  }

找到chooseFileCallback方法，插入以下代码。

//限制文件大小为maxSize 单位M
for (let i = 0; i < files.length; i++) {
	let fileSize = files[i].size / (1024 * 1024)
	if (fileSize  > this.maxSize) {
		uni.showToast({
			title: '文件大于'+this.maxSize+'MB,删除该文件',
			icon: "none"
	    });
        //删除超过大小限制的文件
	    res.tempFiles.splice(i，1)
	}
}

其他页面调用即可，调用时传入的数值就是可上传的最大值。

 <uni-file-picker :maxSize="2"  limit="6"></uni-file-picker>

方案2参考：uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除_uni-file-picker限制大小-CSDN博客

方案3：

相对方案1，方案2来说，方案3是最繁琐的实现方式。优点是限制文件大小的同时，实现了文件预览。

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

这样写的初衷，是为了解决文件预览问题，因为uni-file-picker组件没有pdf,word等文件预览功能，解决文件预览问题的同时，也给限制文件大小提供了新的解决方案。

1.根据以上路径，打开uni-file-picker.vue文件，不传filesList值，修改如下。这样组件在调用时，就不会回显已上传的文件。

<!-- 修改前 -->
<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly"
			:list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon"
			@uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
			<slot><button type="primary" size="mini">选择文件</button></slot>
</upload-file>


<!-- 修改后：不传filesList -->
<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly"
			:list-styles="listStyles" :showType="showType" :delIcon="delIcon"
			@uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
			<slot><button type="primary" size="mini">选择文件</button></slot>
</upload-file>

2.调用@select方法获取文件信息。自己定义一个变量fileList，回显已上传文件。此处css代码没有上传，根据需求简单设计即可，也可参考微信官方文档的样式。

<uni-file-picker ref="files" v-model="fileLists" limit="5" file-mediatype="all" file-extname="doc,docx,pdf" title="最多选择5个文件(仅支持Word,PDF文件)"
			@select="selectFile">
	 <button class="addFile" v-if="editable">选择文件</button>
</uni-file-picker>
//已上传的文件回显
<view class="style" v-for="(item, index) in fileLists" :key="index">
	<view class="u-flex u-row-between">
        //此处的Preview 为预览方法，在此处不做详细展示
		<view class="u-flex" @click="Preview(item)">{{ item.name }}</view>
        //此处的delFile 为文件删除方法，在此处不做详细展示
		<view class="u-flex" @click="delFile(index)">
		    <image src="@/static/close1.png" mode="" style="width: 32rpx; height: 32rpx; margin-right: 20rpx;"></image>
		</view>
	</view>
</view>

3.在selectFile()方法中，处理文件大小的限制，符合需求的文件push到fileList。

selectFile(e){
		console.log("获取上传状态，选择文件：",e)
		let fileSize
		e.tempFiles.forEach(item => {
			fileSize = item.size / (1024 * 1024)
			console.log(item.name,"文件大小:",item.size,"字节")
			console.log(item.name,"文件大小:",fileSize ,"mb")
			if(fileSize <1){
				this.fileLists.push({  //用一个变量单独存储上传的文件数据
				name: item.file.name,
				extname: item.extname,
				urlTemporary: item.url,
				url:''
				})
			}else{
				setTimeout(()=>{
					uni.$showMsg('文件大小不得超过1M')
				})
			}
		})
        //后面根据不同的开发需求做其他处理。
}