小程序模板网

小程序前端直传阿里云oss

2021-06-21 钻天令

一、上传会用到的一些东西:

1.wx.chooseImage;
2.wx.uploadFile;
3.获取上传需要的签名(signature)和加密策略(policy)和上传url(host)的接口;

二、步骤拆解:

1.通过接口获取签名等信息;
2.选择图片得到filePath;
3.上传图片得到oss图片路径并渲染;

三、代码实现:

ossPolicy:{
            OSSAccessKeyId: "LTAIEGwazoZUp6GV",
            accessid: "LTAIEGwazoZUp6GV",
            dir: "",
            expire: 1559634215,
            host: "http://dhb-business-card.oss-cn-aabbccdd.aliyuncs.com",
            policy: "eyJleHBpcmF0aW9uIjoiMjAxOS0wNi0wNFQxNTo0MzozNVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwyMDk3MTUyMDBdLFsic3RhcnRzLXdpdGgiLCIka2V5Ii23Il1dfQ==",
            signature: "2n+ATkFZm23BWrXcfi7hHH9/c+Y="
        }

 2.选择图片:
 

//选择图片
    publishGallery() {
        var imageArray = [];// 多图临时路径数组
        wx.chooseImage({
            count: 9, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
                let filePath = res.tempFilePaths;
                this.uploadImg(filePath)
            }
        })
    },

 3.上传图片

// 上传图片
uploadImg(filePath){
    let _this = this;

    _this.setData({
        uploadPercent: true
    })

    let {
        host,
        OSSAccessKeyId,
        policy,
        signature
    } = this.ossPolicy;

    let imgList = [];
    filePath.map((item) => {
        wx.uploadFile({
            url: host,
            filePath: item,
            name: 'file',
            formData: {
                name: item,
                key: 'bbs/${filename}',
                success_action_status: '200',
                OSSAccessKeyId,
                policy,
                signature
            },
            success: res => {
                if (res.statusCode === 200) {
                    _this.setData({
                        uploadPercent: false
                    });
                    const fileName = item.split('http://tmp/')[1];
                    imgList.push(`${host}/bbs/${fileName}`);
                    _this.setData({
                        img_l: imgList
                    });
                }
            },
            fail: res => {
                console.log(res)
            }
        })
    });
},

 注意事项:

1.上传中拼装的formData中的key为与后端约定的文件名,一般需要进行时间戳加密或者md5加密;

2.后面渲染图片时,imgList的拼装名一定要合key值对应,不然会出现问题;

3.如若需要对图片大小之类的进行一些限制,在chooseImage的success回调里对res.tempFiles进行相关处理;


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26640.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询