CoffeeTalk/pages/upload/index.js

import WeCropper from '../../lib/we-cropper.min.js'

const app = getApp()
const config = app.globalData.config

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

610 / 310

Page({
    data: {
        originimg: '',
        cropperOpt: {
            id: 'cropper',
            targetId: 'targetCropper',
            pixelRatio: device.pixelRatio,
            width,
            height,
            scale: 2.5,
            zoom: 8,
            cut: {
                x: (width - 300) / 2,
                y: (height - 300) / 2,
                width: 305,
                height: 155
            },
            boundStyle: {
                color: config.getThemeColor(),
                mask: 'rgba(0,0,0,0.8)',
                lineWidth: 1
            }
        }
    },
    touchStart(e) {
        this.cropper.touchStart(e)
    },
    touchMove(e) {
        this.cropper.touchMove(e)
    },
    touchEnd(e) {
        this.cropper.touchEnd(e)
    },
    getCropperImage() {
        const that = this;
        this.cropper.getCropperImage(function (path, err) {
            if (err) {
                wx.showModal({
                    title: '温馨提示',
                    content: err.message
                })
            } else {
                // wx.previewImage({
                //   current: '', // 当前显示图片的 http 链接
                //   urls: [path] // 需要预览的图片 http 链接列表
                // });
                wx.showLoading({
                    title: '上传中...',
                });
                wx.uploadFile({
                    url: 'https://hw.cirray.cn/api/upload_image', //仅为示例，非真实的接口地址
                    filePath: path,
                    name: 'file',
                    formData: {},
                    success: function (res) {
                        // wx.hideLoading()
                        wx.hideLoading()
                        const pages = getCurrentPages();
                        const prevPage = pages[pages.length - 2]; //上一个页面
                        //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
                        prevPage.setData({
                            imgList: [...prevPage.data.imgList, res.data],
                            bigImgList: [...prevPage.data.bigImgList, that.data.originimg]
                        })
                        wx.navigateBack({ //返回
                            delta: 1
                        })
                    },
                    fail(e) {
                        wx.showToast({
                            title: '上传失败，请稍后重试！',
                            icon: 'none'
                        })
                        // wx.hideLoading()
                    }
                })
            }
        })
    },
    uploadTap() {
        const self = this

        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success(res) {
                const src = res.tempFilePaths[0]
                //  获取裁剪图片资源后，给data添加src属性及其值

                self.cropper.pushOrign(src)
                wx.uploadFile({
                    url: 'https://hw.cirray.cn/api/upload_image', //仅为示例，非真实的接口地址
                    filePath: src,
                    name: 'file',
                    formData: {},
                    success: function (res) {
                        self.setData({
                            originimg: res.data
                        })
                    }
                })
            }
        })
    },
    onLoad(option) {
        const {
            cropperOpt
        } = this.data

        cropperOpt.boundStyle.color = config.getThemeColor()

        this.setData({
            cropperOpt
        })

        if (option.src) {
            cropperOpt.src = option.src;
            console.log(option);
            this.setData({
                originimg: option.originimg
            })
            this.cropper = new WeCropper(cropperOpt)
                .on('ready', (ctx) => {
                    console.log(`wecropper is ready for work!`)
                })
                .on('beforeImageLoad', (ctx) => {
                    console.log(`before picture loaded, i can do something`)
                    console.log(`current canvas context:`, ctx)
                    wx.showToast({
                        title: '上传中',
                        icon: 'loading',
                        duration: 20000
                    })
                })
                .on('imageLoad', (ctx) => {
                    console.log(`picture loaded`)
                    console.log(`current canvas context:`, ctx)
                    wx.hideToast()
                })
                .on('beforeDraw', (ctx, instance) => {
                    console.log(`before canvas draw,i can do something`)
                    console.log(`current canvas context:`, ctx)
                })
        }
    }
})