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

    效果图

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

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

     

    完整代码

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

    1. <uni-file-picker limit="9" :autoUpload="false" mode="grid" file-mediatype="image" :imageStyles="big_img_styles" v-model="img_desc">uni-file-picker>
    2.  
    3.  
    4.  
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. img_desc: [
    11. 	{
    12. 		fileID: 1,
    13. 		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
    14. 	},
    15. 	{
    16. 		fileID: 2,
    17. 		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
    18. 	},
    19. 	{
    20. 		fileID: 3,
    21. 		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
    22. 	}
    23. ],
    24.  
    25.  
    26. big_img_styles: {
    27. 	"height": 160, // 边框高度
    28. 	"width": 160, // 边框宽度
    29. 	"border": false
    30. },
    31.  
    32.                 }
    33.  
    34. 			}
    35. 		},
    36. script>
    37.

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

    1. <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>
    2. 					
    3.  
    4.  
    5.  
    6. <script>
    7. 	export default {
    8. 		data() {
    9. 			return {
    10.  
    11. img_main: [
    12. 	{
    13. 		fileID: 1,
    14. 		url: 'http://xx.com/0a59c9274b93261a163b29d848bd85ee_20221014181722A003.jpg'
    15. 	}
    16. ],
    17.  
    18. small_img_styles: {
    19. 	"height": 66, // 边框高度
    20. 	"width": 66, // 边框宽度
    21. 	"border": false
    22. },
    23.  
    24.  
    25.                 }
    26.  
    27. 			}
    28. 		},
    29. script>
    30.

    更多介绍

    FilePicker Props

    属性名类型默认值可选值说明
    v-model/valueArray\Object--组件数据，通常用来回显 ,类型由return-type属性决定 ，格式见下文
    disabledBooleanfalse-组件禁用
    readonlyBooleanfalse-组件只读，不可选择，不显示进度，不显示删除按钮
    return-typeStringarrayarray/object限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
    disable-previewBooleanfalse-禁用图片预览，仅 mode:grid生效
    del-iconBooleantrue-是否显示删除按钮
    auto-uploadBooleantrue-是否自动上传，值为false则只触发@select,可自行上传
    limitNumber\String9-最大选择个数 ，h5 会自动忽略多选的部分
    titleString--组件标题，右侧显示上传计数
    modeStringlistlist/grid选择文件后的文件列表样式
    file-mediatypeStringimageimage/video/all选择文件类型,all 只支持 H5 和微信小程序平台
    file-extnameArray\String--选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 file-mediatype 属性而不同
    list-stylesObject--mode:list 时的样式
    image-stylesObject--mode:grid 时的样式

    感谢

    uniapp upload-file-picker 上传图片

    https://www.jianshu.com/p/bdcbbe579e12icon-default.png?t=M85Bhttps://www.jianshu.com/p/bdcbbe579e12

  • 相关阅读:
    Character 类
    【无标题】
    Docker 使用原理流程
    2022牛客多校（二）
    [go语言基础]经典案例:使用并发计算
    『Halcon与C#混合编程』001_环境搭建
    HLS攻城拔寨之—数组优化
    Java项目硅谷课堂学习笔记-P9-整合网关与实现订单和营销管理模块
    Minio安装
    面试题:volatile能否保证线程安全
  • 原文地址：https://blog.csdn.net/qq285744011/article/details/127420832