美文网首页程序员微信小程序微信开发运营
小程序上传一张或多张图片到阿里云OSS

小程序上传一张或多张图片到阿里云OSS

作者: honey缘木鱼 | 来源:发表于2018-06-21 19:26 被阅读51次

    效果图:


    效果图

    一.准备工作

    1.登录阿里云服务器配置需要的参数AccessKeySecret和OSSAccessKeyId。

    var fileHost = "http://*****.oss-cn-qingdao.aliyuncs.com/"
    var config = {
      //aliyun OSS config
      uploadImageUrl: `${fileHost}`, //默认存在根目录,可根据需求改
      AccessKeySecret: 'xgZVY4DHfBnlmwGlsWivF*****',
      OSSAccessKeyId: 'XfOiw9uc*****L',
      timeout: 87600 //这个是上传文件时Policy的失效时间
    };
    module.exports = config
    

    2.Base64,hmac,sha1,crypto相关算法签名算法去下载

    3.WeUI组件上传图片(使用方法请参考https://www.jianshu.com/p/010cea4202b8

    4.上传图片主要的代码为:
    uploadAliyun.js

    const env = require('./config.js');
    
    const Base64 = require('./Base64.js');
    
    require('./hmac.js');
    require('./sha1.js');
    const Crypto = require('./crypto.js');
    
    
    const uploadFile = function (params) {
      if (!params.filePath || params.filePath.length < 9) {
        wx.showModal({
          title: '图片错误',
          content: '请重试',
          showCancel: false,
        })
        return;
      }
      const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', '');
    
      const aliyunServerURL = env.uploadImageUrl;
      const accessid = env.OSSAccessKeyId;
      const policyBase64 = getPolicyBase64();
      const signature = getSignature(policyBase64);
    
      console.log('aliyunFileKey=', aliyunFileKey);
      console.log('aliyunServerURL', aliyunServerURL);
      wx.uploadFile({
        url: aliyunServerURL,
        filePath: params.filePath,
        name: 'file',
        formData: {
          //'name': "picture.png",
          'key': aliyunFileKey,
          'policy': policyBase64,
          'OSSAccessKeyId': accessid,
          'signature': signature,
          'success_action_status': '200',
        },
        success: function (res) {
          if (res.statusCode != 200) {
            if (params.fail) {
              params.fail(res)
            }
            return;
          }
          if (params.success) {
            params.success(aliyunFileKey);
          }
        },
        fail: function (err) {
          err.wxaddinfo = aliyunServerURL;
          if (params.fail) {
            params.fail(err)
          }
        },
      })
    }
    
    const getPolicyBase64 = function () {
      let date = new Date();
      date.setHours(date.getHours() + env.timeout);
      let srcT = date.toISOString();
      const policyText = {
        "expiration": srcT, //设置该Policy的失效时间
        "conditions": [
          ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
        ]
      };
    
      const policyBase64 = Base64.encode(JSON.stringify(policyText));
      return policyBase64;
    }
    
    const getSignature = function (policyBase64) {
      const accesskey = env.AccessKeySecret;
    
      const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
        asBytes: true
      });
      const signature = Crypto.util.bytesToBase64(bytes);
    
      return signature;
    }
    
    module.exports = uploadFile;
    
    

    注意:在小程序的配置位置如图:


    项目中js的位置

    5.选图片的方法:

    chooseImage:function(e){
        var selectPictureNum = e.target.dataset.num;
        this.setData({
          count: 9 - selectPictureNum
        })
        var that = this;
        wx.chooseImage({
          count: that.data.count, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function(res) {
            var tempFilePaths = res.tempFilePaths;
            that.setData({
              filePath: res.tempFilePaths[0],
              images: that.data.images.concat(tempFilePaths)
            })
          },
        })
    
      },
    

    点击确定上传到的代码(多张图片):

    uploadImg: function(){
        var that = this;
        console.log(JSON.stringify(that.data.uploadImgs))
        for (var i = 0; i < that.data.uploadImgs.length;i++){
          var filePath = that.data.uploadImgs[i];
    
          uploadImage(
            {
              filePath: filePath,
              dir: "images/",
              success: function (res) {
                console.log("上传成功")
                console.log("上传成功" + JSON.stringify(res))
              },
              fail: function (res) {
                console.log("上传失败")
                console.log(res)
              }
            })
        }
        
      },
    

    uploadImg.wxss代码:

    @import "../../weui.wxss"; 
    

    6.上传成功后的结果如图:


    结果

    其中

    images/http://tmp/wx1b4e5e756cd48af1.o6zAJsws4grEQvYrWTjBigy-6QaU.0llhudiKSF2V955a1c48350d9328ef064b4d36d12746.jpg
    

    就是在阿里云服务器的图片名称,拼接上"http://yijiao.oss-cn-qingdao.aliyuncs.com/images/http://tmp/wx1b4e5e756cd48af1.o6zAJsws4grEQvYrWTjBigy-6QaU.0llhudiKSF2V955a1c48350d9328ef064b4d36d12746.jpg"才是完整图片。

    该demo gitHub的下载地址:https://github.com/dt8888/uploadImage,如有疑问请发简信给我,定会回复。

    相关文章

      网友评论

      • 33ee318095dd:请问 RN 中 用 js formDate 怎么多图上传 他只允许 一次上传 一张

      本文标题:小程序上传一张或多张图片到阿里云OSS

      本文链接:https://www.haomeiwen.com/subject/kqpcyftx.html