【微信小程序】图片上传功能的实现

最新推荐文章于 2024-08-03 10:21:01 发布

不大好不大好

最新推荐文章于 2024-08-03 10:21:01 发布

阅读量385

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44707049/article/details/115326601

版权

本文介绍了如何在微信小程序中实现图片上传功能，包括图片选择、上传、预览和删除等步骤。涉及到WXML、JSON、WXSS和JS文件的编写，并提到了PHP后台处理图片上传的逻辑，同时建议可以使用组件库的upfile组件作为替代方案。

摘要由CSDN通过智能技术生成

参考文章 https://blog.csdn.net/qq_39958629/article/details/89403622

需求概述：
做一个页面，有现场亮点和现场缺点两个部分，两个部分结构、功能类似。以现场亮点为例，现场亮点分为现场亮点描述和现场亮点图片上传两个功能。
如下图，先完成功能，不考虑样式：
在这里插入图片描述

现场亮点、缺点描述功能这里不细说，主要是图片选择、上传、预览以及删除功能的实现。
图片上传功能
wxml文件

<view class="page">
    <view class="page__bd">
        <mp-cells ext-class="fontWeight">
            <mp-cell value="现场亮点"></mp-cell>
        </mp-cells>
        <view class="weui-cells__title">现场亮点描述</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入现场亮点描述" style="height: 5.2em" />
                </view>
            </view>
        </view>
        <view class="weui-cells__title">现场亮点图片</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="img_box">
                        <view class="imgs" wx:for="{
    {LD_tempFilePaths}}" wx:key="index">
                            <image src='{
    {item}}' 
                                bindlongpress="deleteImage" 
                                bindtap="listenerButtonPreviewImage" 
                                data-type="现场亮点" data-index="{
    {index}}" 
                                mode='widthFix' />
                        </view>
                       
                        <view class="imgs">
                        <view class="images" bindtap="upload" data-type="现场亮点">
                            <image src='./img/tianjia.png' mode='widthFix' />
                        </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

    <view class="page__bd">
        <mp-cells ext-class="fontWeight">
            <mp-cell value