微信小程序图片的上传与显示

最新推荐文章于 2025-05-22 09:38:38 发布

丿旧时光灬鑫

最新推荐文章于 2025-05-22 09:38:38 发布

阅读量6k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40128701/article/details/90719629

本文介绍了在微信小程序中实现图片上传和显示的步骤，包括使用WEUI组件库进行排版布局，编写逻辑代码，以及展示实际效果。通过本文，你可以了解到如何在小程序中集成图片上传和预览功能。

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

在编写小程序的项目过程中，难免会有需要上传图片，并且显示在指定位置。下面是我在编写微信小程序图片的上传与显示时遇到的一些问题与解决办法。

微信小程序开发文档里有很详细的介绍，但是有很多人是不是和我一样看文档看不下去。这里我推荐使用微信官方推出的WEUI组件库：https://weui.io/，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。下面进入代码正题：

一、wxml排版和布局

<view class="page">
    <view class="page__hd">
        <view class="page__title">Uploader</view>
        <view class="page__desc">上传组件</view>
    </view>
    <view class="page__bd">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="weui-uploader">
                        <view class="weui-uploader__hd">
                            <view class="weui-uploader__title">图片上传</view>
                            <view class="weui-uploader__info">{
  
  {files.le