uview的u-upload的使用

最新推荐文章于 2025-04-24 15:22:48 发布

米白蓝

最新推荐文章于 2025-04-24 15:22:48 发布

阅读量7.1k

点赞数 3

分类专栏： uview 文章标签： uview javascript

本文链接：https://blog.youkuaiyun.com/qq_50563868/article/details/126375586

版权

uview 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在UView中使用u-upload组件进行图片上传操作，重点关注@afterRead事件用于添加图片路径到数组，以及@delete事件结合splice方法实现图片删除。同时提到了数组方法join()的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传图片

用到u-upload组件的@afterRead和@delete事件，前者用push方法添加图片路径，后者用splice(第一个参数重哪个位置开始，第二个参数删除几个元素)删除

<template>
	<view>
		<u-upload :fileList="fileList" @afterRead="readImg" :deletable="true" @delete="delImg"></u-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: []
			}
		},
		methods: {
			readImg(e) {
				console.log(e)
				this.fileList.push({url: e.file.url})
			},
			delImg(e) {
				console.log(e)
				this.fileList.splice(e.index,1)
			}
		}
	}
</script>

数组方法Jion

使用数组方法array.jion(),如果括号里面不传，默认使用逗号分隔

<template>
	<view>
		<view class="">{{strFalinl}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strList: ['第一个字符','第二个字符串','第三个字符串'],
				strFalinl: ''
			}
		},
		mounted() {
			this.str()
		},
		methods: {
			str() { 
				var list = []
				this.strList.forEach(item=> {
					console.log(item)
					list.push(item)
				})
				console.log(list)
				this.strFalinl = list.join()
			}
		}
	}
</script>