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

相关连接：

https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.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);
},