uniapp返回上一页携带参数并渲染页面

 实测有效!!!

<template>
	<view>
		<view>返回的数据为:</view>
		<view>id: {{testdata.id}}</view>
		<view>name: {{testdata.name}}</view>
		<button type="primary" @click="goNext">跳转到下一页面</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testdata: {
					id: '',
					name: ''
				}
			}
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; //当前页面
			let json = currPage.data.testdata;
			this.testdata = json;
		},
		methods: {
			goNext() {
				uni.navigateTo({
					url: '/pages/next/next'
				})
			}
		}
	}
</script>

<style>

</style>
<template>
	<view>
		<button type="primary" @click="goBack">点击返回上一页</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mydata: {
					id: 1,
					name: 'test'
				}
			}
		},
		methods: {
			goBack() {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.testdata = this.mydata;
				 prevPage.setData(this.mydata);
				uni.navigateBack({//返回
					delta: 1
				})
			}
		}
	}
</script>

<style>

</style>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 在uni-app项目中,可以使用uni.uploadFile API实现多张照片的上传。下面是一个示例: ``` // 获取图片的本地文件路径列表 let tempFilePaths = [] uni.chooseImage({ count: 9, success: function (res) { tempFilePaths = res.tempFilePaths for (let i = 0; i < tempFilePaths.length; i++) { uni.uploadFile({ url: '服务器地址', filePath: tempFilePaths[i], name: 'file', formData: { 'user': 'test' }, success: function (uploadFileRes) { console.log(uploadFileRes.data) } }); } } }); ``` 在服务器接收到照片后,可以在页面渲染出来。下面是一个简单的例子: ``` <template> <view class="container"> <view v-for="(item, index) in imageList" :key="index"> <image :src="item" mode="aspectFit" /> </view> </view> </template> <script> export default { data() { return { imageList: [] } }, onLoad() { // 获取服务器返回的照片的 URL 列表 this.imageList = [ '图片 URL 1', '图片 URL 2', '图片 URL 3', // ... ] } } </script> ``` ### 回答2: 在使用uni-app上传多张照片到服务器并渲染页面上的过程中,可以按照以下步骤进行操作: 1. 在uni-app页面中,首先需要在模板中添加一个input标签,用于选择多张照片文件: ```html <template> <input type="file" multiple @change="uploadImages"> </template> ``` 2. 在对应的脚本部分,定义一个uploadImages的方法,用于处理照片上传的逻辑: ```js methods: { uploadImages(event) { const files = event.target.files; // 获取选择的照片文件列表 const formData = new FormData(); // 创建一个FormData对象,用于存储照片数据 for(let i = 0; i < files.length; i++) { formData.append('file[]', files[i]); // 将每一张照片文件添加到FormData中 } // 发送请求将照片上传到服务器 uni.request({ url: '服务器上传照片接口的URL', method: 'POST', header: { 'Content-Type': 'multipart/form-data' }, data: formData, success: (res) => { // 上传成功,服务器返回的照片地址存储在res.data中 const imageURLs = res.data; // 假设服务器返回的是一个照片地址数组 // 将照片地址数组赋值给页面上的变量,用于渲染页面上 this.imageURLs = imageURLs; }, fail: (err) => { // 上传失败,进行相应的处理 } }) } } ``` 3. 在页面上定义一个用于渲染照片的区域: ```html <view> <image v-for="(imageURL, index) in imageURLs" :src="imageURL" :key="index" mode="aspectFit"></image> </view> ``` 4. 最后,在对应的脚本部分,定义一个用于存储照片地址的变量: ```js data() { return { imageURLs: [] // 用于存储照片地址的数组 } } ``` 通过以上步骤,当用户选择多张照片后,会触发uploadImages方法将照片上传到服务器,在上传成功后,将返回的照片地址存储在imageURLs变量中,并通过v-for指令循环渲染页面上。 ### 回答3: 在使用Uniapp上传多张照片到服务器并渲染页面上的过程中,可以按照以下步骤进行操作: 1. 引入uni-upload组件:在页面布局中,可以使用uni-upload组件来实现图片上传的功能。可以在需要上传图片的地方添加一个uni-upload组件,并设置合适的属性。 2. 设置上传参数:在uni-upload组件中,设置请求上传的参数。可以包括上传的URL、请求的方法、请求头等。同时,还可以设置一些其它的参数,例如文件类型、文件大小限制等。 3. 选择照片并上传:在页面上添加一个触发上传的按钮,用户可以点击该按钮来选择照片进行上传。将用户选择的照片文件作为参数,调用uni.uploadFile()方法实现图片上传。 4. 上传结束后的处理:当图片上传结束后,服务器会返回一个上传成功的响应。在响应的回调函数中,可以获得上传成功后的图片URL等信息。可以将这些信息保存到页面的数据或者Vuex状态管理中。 5. 渲染页面上:将上传成功的图片URL渲染页面上。可以通过循环遍历页面的数据或者Vuex中的图片URL列表,使用v-for指令将每个图片URL渲染页面的相应位置。 总之,使用Uniapp上传多张照片到服务器并渲染页面上,需要通过Uniapp提供的uni-upload组件来实现上传功能,并在上传结束后将上传成功的图片URL渲染页面。同时,还需要合理设置上传参数和处理上传响应,以确保上传的稳定性和功能的完整性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王旭晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值