微信小程序实现上传图片/预览放大/删除图片功能

最新推荐文章于 2025-06-26 20:16:35 发布

原创

最新推荐文章于 2025-06-26 20:16:35 发布 · 9.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #上传图片

本文详细介绍了如何在微信小程序中实现图片上传至服务器、图片预览并支持放大功能，以及如何实现在小程序内删除已上传的图片。通过调用微信小程序的API，结合后台接口，确保图片上传的安全性和用户体验。开发者可以参照本文的步骤，轻松实现相关功能。

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

// pages/common/uploadImage.js

const netUtil = require("../../utils/netUtil");

const util = require("../../utils/util.js");

import {colors} from '../../utils/colors';

var app = getApp();

Page({


    /**

     * 页面的初始数据

     */

    data: {

        imgList: [],

        tempFilePaths: [],

        arr: [],

        url: [],

        id: '',

        paramData: {},

        key: '',

        val: '',

        i: 0

    },


    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function (options) {

        var that = this;

        var id = options.id;

        that.setData({

            id: id

        })

        that.data.url = wx.getStorageSync('url' + "-" + that.data.id)

        if (that.data.url.length != 0) {

            that.setData({

                tempFilePaths: that.data.url,

                imgList: that.data.url,

                arr: that.data.url,

                i: that.data.url.length

            })