小程序图片上传及后台PHP接收文件

Love The Way You Lie 2022-02-15 10:59 473阅读 0赞

相关连接：

[https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.chooseImage.html]

[https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.uploadFile.html]

前台代码wxml:

<view bindtap="shopLogoChange">空白处上传</view>

///api.js
    /**
     * 图片上传
     * @param method
     * @param params
     * @param name $_FILES['name']
     * @param filePath 临时文件
     * @returns {Promise}
     */
    function uploadFile(method, params, name, filePath) {
        wx.showLoading({title: '加载中'});
        return new Promise(function (resolve, reject) {
            params.method = method;
            params.api = config.apiId;
            params.time = parseInt((new Date()).getTime() / 1000);
            let session = getSession();
            if(session) {
                params.session = session;
            }
            // console.log(params);
            wx.uploadFile({
                filePath: filePath,
                name: name,
                formData: params,
                url: config.apiUrl,
                header: {
                    'app-version': config.version,
                    'app-key': generateKey(params)
                },
                success: res => {
                    // console.log(JSON.parse(res.data));
                    if (res.statusCode == 200) {
                        resolve(JSON.parse(res.data));
                    } else {
                        reject(res.errMsg);
                    }
                },
                fail: err => {
                    reject(err);
                },
                complete: data => {
                    wx.hideLoading();
                }
            });
        });
    }

//js
    const api = require("../../utils/api.js");
    Page({
        uploadFile : function () {
            let that = this;
            wx.chooseImage({
                count : 1,
                success : res => {
                    let tempFilePaths = res.tempFilePaths[0];
                    that.setData({
                        'image' : tempFilePaths,
                    });
                    api.uploadFile('system.uploadImage', {type : 'shop'}, 'image', tempFilePaths).then(res => {
                        console.log('上传图片');
                        console.log(res);
                        if(res.code != 1) {
                            wx.showToast({
                                title : res.message,
                                icon : 'none',
                                duration : 2000,
                            });
                            return false;
                        }
                        that.setData({
                            'image' : res.data.imageUrl,
                        });
                        //数据保存操作
                    });
                },
                fail : resError => {
                    console.log('选择图片错误：');
                    console.log(resError);
                },
            });
        },
    });

PHP相关api：

/**
     * system.uploadImage
     * 上传图片操作
     */
    public function uploadImage()
    {
        $image = UploadedFile::getInstanceByName('image');//相当于$_FILES['image']
        if($image && $image->tempName) {
            $filename = date('YmdHis') . rand(100,999) . '.' . $image->getExtension();
            $path = 'images/';
            $file = Yii::getAlias('@uploadPath/' . $path);
            if(!file_exists($file)) {
                mkdir($file, 0777, true);
            }
            //将微信传的临时文件移动到server的指定位置
            if(move_uploaded_file($image->tempName, $file . $filename)) {
                return ['code'=>Api::CODE_SUCCESS, 'message'=>'图片上传成功', 'data'=>[
                    'image' => $path . $filename,
                    'imageUrl' => Yii::getAlias('@uploadUrl/' . $path . $filename)
                ]];
            }
            return ['code'=>Api::CODE_FAIL, 'message'=>'图片上传失败'];
        }
        return ['code'=>Api::CODE_FAIL, 'message'=>'图片上传失败'];
    }

小程序多张图片上传：原理就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

data: {
        images : [],//图片列表
    },
    //上传操作
    uploadImages : function() {
        let that = this;
        let param = {};
        wx.chooseImage({
            sizeType:['compressed'],
            success(res) {
                const tempFilePaths = res.tempFilePaths;
                let i = 0;
                let uploadFile = function(i) {
                    api.uploadFile('system.uploadImage', param, 'image', tempFilePaths[i]).then(function(res){
                        if(res.code == 1) {
                            let image = {
                                imageUrl : res.data.imageUrl,
                                imagePath : res.data.image,
                            };
                            let imagesObj = that.data.images;
                            imagesObj.push(image);
                            that.setData({
                                images : imagesObj,
                            });
                        }
                        if(i < (tempFilePaths.length-1)) {
                            i++;
                            uploadFile(i);
                        }
                    }, function(err){});
                };
                uploadFile(i);
            }
        });
    }
    
    //保存操作
    saveProfile : function (e) {
        let _that = this;
        console.log(_that.data.images);
    },

[https_developers.weixin.qq.com_miniprogram_dev_api_wx.chooseImage.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.uploadFile.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html