uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片 + 头像图片原地覆盖上传示例_uni-file-picker回显

效果图

uni-file-picker显示之前已上传的图片

 头像图片原地覆盖上传（不显示删除按钮）

 

完整代码

uni-file-picker显示之前已上传的图片

<uni-file-picker limit="9" :autoUpload="false" mode="grid" file-mediatype="image" :imageStyles="big_img_styles" v-model="img_desc"></uni-file-picker>
 
 
 
<script>
	export default {
		data() {
			return {
 
img_desc: [
	{
		fileID: 1,
		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
	},
	{
		fileID: 2,
		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
	},
	{
		fileID: 3,
		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
	}
],
 
 
big_img_styles: {
	"height": 160, // 边框高度
	"width": 160, // 边框宽度
	"border": false
},
 
                }
 
			}
		},
</script>
 

头像图片原地覆盖上传（不显示删除按钮）

<uni-file-picker limit="1" :autoUpload="false" disable-preview :del-icon="false" mode="grid" file-mediatype="image" :imageStyles="small_img_styles" v-model="img_main"></uni-file-picker>
					
 
 
 
<script>
	export default {
		data() {
			return {
 
img_main: [
	{
		fileID: 1,
		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
	}
],
 
small_img_styles: {
	"height": 66, // 边框高度
	"width": 66, // 边框宽度
	"border": false
},
 
 
                }
 
			}
		},
</script>
 

更多介绍

FilePicker Props

感谢

uniapp upload-file-picker 上传图片

https://www.jianshu.com/p/bdcbbe579e12https://www.jianshu.com/p/bdcbbe579e12