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

// 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

            })

        }

    },


    /**

     * 生命周期函数--监听页面初次渲染完成

     */

    onReady: function () {


    },


    /**

     * 生命周期函数--监听页面显示

     */

    onShow: function () {

// var that = this;

// 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

// })

// }

    },


    /**

     * 生命周期函数--监听页面隐藏

     */

    onHide: function () {


    },


    /**

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

     */

    onUnload: function () {


    },


    /**

     * 页面相关事件处理函数--监听用户下拉动作

     */

    onPullDownRefresh: function () {


    },


    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom: function () {


    },


    /**上传图片 */

    uploadImage: function () {

        var that = this;

        wx.chooseImage({

            count: 1, // 最多可以选择的图片张数,默认9

            sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有

            sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有

            success: function (res) {

//上传图片到服务器

                var i = that.data.i;

                netUtil.uploadFileRequest('/hallapplet/device/upload', res.tempFilePaths[0], 'file', {}, function (res) {

                    var imgUrl = JSON.parse(res.data).resParam.imgAddr + JSON.parse(res.data).resParam.imgPath;

// 限制只能上传三张照片

                    if (that.data.imgList.length < 3) {

                        that.data.arr.push(imgUrl)

                        that.data.imgList.push(imgUrl)

                        var num = that.data.i + 1;

                        that.setData({

                            arr: that.data.arr,

                            i: num,

                            tempFilePaths: that.data.imgList

                        });

                    } else {

                        wx.showModal({

                            title: '温馨提示',

                            content: '最多可上传三张照片',

                            showCancel: false,

                            confirmText: '确定',

                            confirmColor: colors.confirmColor

                        });

                    }

                })

            }

        })

    },

    /**删除图片 */

    deleteImage: function (e) {

        var that = this;

        var imgList = that.data.imgList;

        var arr = that.data.arr;

        var index = e.currentTarget.dataset.index;

        imgList.splice(index, 1);

        arr.splice(index, 1);

        var num = that.data.i - 1

        that.setData({

            tempFilePaths: imgList,

            arr: arr,

            i: num,

        });

    },

    /**预览图片 */

    previewImage: function (e) {

        var that = this;

//获取当前图片的下标

        var index = e.currentTarget.dataset.index;

//所有图片

        var imgList = that.data.imgList;

//预览图片

        wx.previewImage({

//当前显示图片

            current: imgList[index],

//所有图片

            urls: imgList

        })

    },

    /**确定按钮 */

    onloadTap: function () {

        var that = this;

        var id = that.data.id;

        that.data.url = that.data.arr;

        wx.setStorageSync('url' + "-" + id, that.data.url)

        wx.navigateBack({

            delta: 1, // 回退前 delta(默认为1) 页面

        })

    },

})

 

你可能感兴趣的:(微信小程序)