微信小程序图片/视频直传阿里云服务器OSS

阿里云官方文档:

https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj

第一步(需要由后台提供接口,前端获取一些必要参数)

    oss: function(token) {
        var _this = this;
        wx.request({
            url: kidUrl + 'JurisdictionOss/encryption',
            data: {
                token: token
            },
            method: 'POST',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                if (res.statusCode == 200) {
                    _this.setData({
                        accessid: res.data.accessid,
                        policy: res.data.policy,
                        signature: res.data.signature,
                        uploadUrl: res.data.host,
                        uploadUrlend: res.data.dir,
                        expire: res.data.expire,
                    })
                }
            }
        })
    },

第二步(获取上传的图片的临时路径)

    addPhoto: function(res) {
        var _this = this;
            wx.chooseImage({
                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths;
                    _this.setData({
                        photoArr: tempFilePaths
                    })
                }
            })
    },

第三步(图片上传阿里云/服务器)

    //上传照片(阿里云)
    uploadAli: function(babyData, photoArr) {
        var _this = this;
        var uploadUrl = this.data.uploadUrl;
        var uploadUrlend = this.data.uploadUrlend;
        var photoArrLen = photoArr.length;
        wx.uploadFile({
            url: uploadUrl,
            formData: babyData,
            name: 'file',
            filePath: photoArr[0],
            header: {
                'content-type': 'multipart/form-data'
            },
            success: res => {
                if (res.statusCode == 200) {
                    //表示上传成功(可以在阿里云服务器查看上传的图片)
                }
            }
        })
    },
    //图片上传服务器
    uploadRq: function(imgData) {
        var _this = this;
        wx.request({
            url: kidUrl + 'xxxx',
            data: imgData,
            method: 'POST',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                //成功后台会给你返回阿里云那边的图片地址
            }
        })
    },

第四步(点击上传图片的按钮操作)

    //发布按钮
    release: function(e) {
        var _this = this;
        //获取照片数组
        var photoArr = this.data.photoArr;
        //获取时间
        var date = this.data.date;
        var userToken = this.data.userToken;
        //时间搓
        var expire = this.data.expire;
        //获取当前时间搓
        var expireNow = Date.parse(new Date()) / 1000;
        //如果当前时间大于获取的时间 则重新获取oss;      
        if (expireNow > expire) {
            //重新获取oss
            _this.oss(userToken);
            expire = this.data.expire;
        }
        //传给阿里云的参数
        var policy = this.data.policy;
        var accessid = this.data.accessid;
        var signature = this.data.signature;
        var uploadUrlend = this.data.uploadUrlend;
        //传给阿里云的参数-end
        var newPhoto = '';
        var photoArrsm = '';
        //由于微信小程序生成的临时路径在上传阿里云的时候不需要上传.所以需要对路径进行处理,但是在手机端上传和PC端上传,图片临时路径的前缀不同,所以需要进行分别的处理
        if (photoArr[0].indexOf('http://tmp/') != -1) {
            photoArrsm = uploadUrlend + photoArr[0].replace('http://tmp/', "");
        }
        if (photoArr[0].indexOf('wxfile://') != -1) {
            photoArrsm = uploadUrlend + photoArr[0].replace('wxfile://', "");
        }
            // 传给服务器的参数
        var imgData = {
            token: userToken,
            descript: textareaTxt,
            type: 1,
            write_time: date,
            babyid: babyid,
            phtots_url: photoArrsm
        }
        _this.uploadRq(imgData)
        var babyData = {
            'Filename': '${filename}',
            'name': 'photoArr[0]',
            'key': uploadUrlend + '${filename}',
            'policy': policy,
            'OSSAccessKeyId': accessid,
            'success_action_status': '200', //让服务端返回200,不然，默认会返回204
            'signature': signature
        }
        this.uploadAli(babyData, photoArr)
    },

上传流程:

选择图片-->获取到图片临时路径,将图片临时路径存入data

点击发布按钮-->获取oss参数

获取oss参数成功-->执行上传阿里云

上传阿里云成功-->执行上传服务器

上传服务器成功-->结束整个上传流程

扫描二维码关注公众号，回复： 3066230 查看本文章

由于为了方便大家浏览,没有用函数回调.

大家可以根据自己的需求,结合自己的场景,来进行函数回调或者使用ES6的Promise方法.

上传阿里云过程中几个容易忽视的坑: 图片路径处理/时间戳判断

特别注意:

这里官方文档给出的传法是如上图所示,但是在微信小程序中不知道什么原因会导致无法上传报错403,

于是我改了写法,如下图

用这样的写法是可以上传成功的 /修改key的 ${filename} 名字,即是修改上传的文件的名称

未经过允许,禁止转载!!!!

微信小程序图片/视频直传阿里云服务器OSS

猜你喜欢