uni-app上传图片和文件

最新推荐文章于 2024-09-12 15:56:50 发布

phyit

最新推荐文章于 2024-09-12 15:56:50 发布

阅读量4.5k

点赞数 1

分类专栏：前端 html 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/tgs2033/article/details/123431649

版权

前端同时被 2 个专栏收录

52 篇文章 3 订阅

订阅专栏

html

46 篇文章 0 订阅

订阅专栏

本文介绍了在uni-app中实现图片上传的详细步骤，包括使用uni.chooseImage选择图片，限制最多9张，以及使用Promise.all批量上传图片。同时展示了上传文件的逻辑，包括调用上传接口uni.uploadFile，预览文件功能，以及通过文件后缀判断文件类型的实现。此外，还提供了文件上传插件LFile的使用示例，包括上传附件、上传成功回调以及文件预览等操作。

摘要由CSDN通过智能技术生成

如图所示：

上传图片,使用的是uni.chooseImage这个官方api，count 数量根据自己的需求来，我们是最多只能上传9张

          uploadImgEvent(){
		     uni.chooseImage({
		    		count: 10 - this.uploadImgsList.length,
		    		success: (res) => {
		    		this.uploadImgsList.unshift(...res.tempFiles.map(item => ({
		    			picturePath: item.path
		    		})));
		    		if(this.uploadImgsList.length == 10) this.uploadImgsList.pop();
		    		}
		    });
			},

uploads(){
	const _this = this;
return  Promise.all(_this.uploadImgsList.map(item=>_this.uploadImage(item.picturePath))).then(res=>{
			return res.map(item=>({
				 fileName:item.fileName,
				 filePath:item.url
			}))
   })
},
uploadImage(url) {
	return new Promise(async (resolve, reject) => {  
		uni.uploadFile({
			url: await getUploadUrl(), //后台地址
			filePath: url,
		    name: 'file',
			success: (uploadFileRes) => {
				resolve(JSON.parse(uploadFileRes.data)); 
			}
		})
	})
},

提交给后代的数据

           //提交
		   async submitFlood(){
		       let photoList = await this.uploads();
			}

打印photoList如图：

上传文件使用的LFile 这个插件https://ext.dcloud.net.cn/plugin?id=4109

根据官网案例来

		 //上传附件
			uploadFile() {
				const that = this;
				if(that.imgUploadList.length >= 9){
					this.$mHelper.toast('最多上传9张')
					return;
				}
				that.$refs.lFile.upload({
						// #ifdef APP-PLUS
						currentWebview: that.$mp.page.$getAppWebview(),
						// #endif
						url: 'xxxxxx', //你的上传附件接口地址
						name: 'file'
						},
					});
			},

         //上传成功
			upSuccess(res) {
				let url = res.root.url;
				let name = res.root.originalName;
				let fileType = this.isFileType(res.root.type);
				let size = res.root.size;
				if(fileType == 'image'){
					this.imgUploadList.push({url,name,fileType,size});
				}else{
					this.fileUploadList.push({url,name,fileType,size})
				}
			},
         //根据文件后缀名来判断，展示对应的图标
        isImage(type){
				return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
			},
			isDocx(type){
				return ['doc','docx'].includes(type.toLowerCase());
			},
			isXsls(type){
				return ['xsls','xsl'].includes(type.toLowerCase());
			},
			isText(type){
				return ['text','txt'].includes(type.toLowerCase());
			},
			isFileType(type){
				if(this.isImage(type)) return 'image';
				if(this.isXsls(type)) return 'excel';
				if(type == 'pdf') return 'pdf';
				if(this.isDocx(type)) return 'word';
				if(this.isText(type)) return "text";
				// return "#icon-file-b--6";
			},
           //文件预览
			previewFile(item){
				uni.downloadFile({
					url: item.url,
					success: (res) => {
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: (res) => {
								console.log('打开文档成功');
							}
						})
					}
				})
			},