uniapp 选择图片和上传

101 阅读1分钟
			//修改包间图片
			changeBanner() {
				uni.chooseImage({//这个是选择图片的api 可以查看uniapp 的文档
					count: "1",//图片张数
					success: (res) => {
						console.log('res', res);
						this.file = res.tempFiles[0]
						this.uploadImage()
					},
					fail: (err) => {
						console.log("err: ", JSON.stringify(err));
						uni.showToast({
							title: "选择图片失败",
							icon: "none",
						});
					}
				})
			},
			uploadImage() {
				if (!this.file.length === 0) {
					uni.showToast({
						title: '请选择一个图片',
						icon: 'none',
					});
					return;
				}
				let maxSize = 10
				console.log(this.file.size / 1024 / 1024, 'this.file.size / 1024 / 1024');
				if (!this.file.size / 1024 / 1024 >= maxSize) {
					uni.showToast({
						title: '图片不能超过10MB',
						icon: 'none',
					});
					return;
				}
				uni.showLoading()
				let token = uni.getStorageSync('token')//拿到token
				console.log(this.file.path, ' this.file.path');

				uni.uploadFile({
					url: 'XXXX', // 替换为你的上传服务器接口
					filePath: this.file.path,
					name: 'uploadFile',//这个name 和后端要的name 对应就可以通过本地路径的filePath 得到二进制的数据流
					header: {
						"Authorization": ` ${token}`,
						"Content-Type": "multipart/form-data"//看后端要什么
					},
					formData: {
						"dfsCode": "MinIO",//后端要的
					},
					success: (res) => {
						// 上传成功后的处理
						console.log(res.data);
						let resObj = JSON.parse(res.data)
						console.log(resObj, 'res123123', resObj.data);
						// 你可以在这里处理服务器返回的数据(看清楚数据格式在操作,这里可能每个人的服务器返回来的东西不一样)
						let params = {
							banner: JSON.stringify(resObj.data),
							id: xxxx,//其他参数
							storeId: xxxx//其他参数
						}
						console.log(params, 'params');
						//保存的接口
						updateRoomMessage(params).then(res => {
							uni.showToast({
								title: '上传成功',
								icon: 'success',
							});
						})

					},
					fail: (err) => {
						// 上传失败时的处理
						console.error(err);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},