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)
									}
								})
							}
						}
					});
				}
			},

上传单张

//可直接去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) {
						
					}
				})

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值