uniapp上传图片、一次性上传多张图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp上传图片、一次性上传多张图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp官方文档

上传多张图片

upload_images() {
				let that = this;
                //这里是限制上传的图片张数
                //that.insert.images是代码的数据结构，需换成自己的数据结构
				if (that.insert.images.length >= 5) {
					uni.showToast({
						title: `最多只能上传${that.insert.images.length}张图片`,
						icon: 'none',
						mask: true,
						duration: 1500
					})
				} else {
					uni.chooseImage({
						count: 5, //默认9【一次性可以选择几张，范围1~9】

                        //可以指定是原图还是压缩图，默认二者都有
						sizeType: ['original', 'compressed'], 

						sourceType: ['album'], //从相册选择

						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
                            
                            //循环遍历传入，达到一次性上传多张的效果
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
                                    // 后端api接口
									url: 'https://xxxxx', 

                                    // uni.chooseImage函数调用后获取的本地文件路劲
									filePath: tempFilePaths[i], 

									name: 'file', //后端通过'file'获取上传的文件对象

                                    //这里是请求头需要携带的token数据
                                    // getStorageSync获取本地缓存的token
									header: {
										token: uni.getStorageSync('token'),
									},
									success: (uploadFileRes) => {
										let imgRes = JSON.parse(uploadFileRes.data);
										console.log(imgRes);
										if (imgRes.code == 0) {
											uni.showToast({
												title: imgRes.msg,
												icon: 'error',
												duration: 2000
											});
											return;
										}
										that.insert.images.push(imgRes.data.url)
									}
								})
							}
						}
					});
				}
			},

上传单张文章来源地址https://www.toymoban.com/news/detail-530987.html

//可直接去uniapp 官方文档搜索查看
uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					sourceType:['camera','album'],//camera 拍照 album 相册
					success:(res)=> {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
								url: "xxxxxx",// api地址
								filePath: tempFilePaths[0], // 本地上传完成后的路径
								name: 'file', // 默认
								header: {
								"Content-Type": "multipart/form-data", // formdata提交格式
								"token": uni.getStorageSync('token') // token验证
							},
							success:(uploadFileRes)=> {
								let data = JSON.parse(uploadFileRes.data)
								resolve(data);
							}
						});
					},
					fail(err) {
						
					}
				})

到了这里，关于uniapp上传图片、一次性上传多张图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！