小程序上传图片到阿里云指定文件夹心酸历程

好久没更博了，最近写的一个项目需要将小程序图片上传到阿里云，第一次做这样的需求，手足无措的感觉。可能项目性质不同，以前小程序上传图片，调后台接口上传至服务器。考虑到此项目图片居多原因，只能借助第三方。下面就来说下我的坑路历程吧~

1.一开始看阿里云文档，有两种模式，一种免密登录，一种是需要后台加入，解密算法和签名。想在前端直接解决（由于本项目一第一版考虑欠缺，后台解密需要的一些参数暂时无法实现）。网上找了一通资料，急吼吼的想解决，可惜花费了两天。说明不能心急，搞懂需求和思路才是硬道理，网上的资料也并不能帮助自己解决所有的问题，仅供参考!!!

2.下面说下实现的思路：

2.1、把上传图片封装成组件（upload），上传图片使用weui的upload组件，大家都耳熟能详啦:

upload.wxml

<view class='photo mt40'>
  <view class="weui-uploader__bd">
    <view class="weui-uploader__files" id="uploaderFiles">
      <block wx:for="{{images}}" wx:key="*this">
        <view class="weui-uploader__file relative" bindtap="previewImage" id="{{item}}" data-index="{{index}}">
          <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
          <image class='closeIcon' src="../../images/close.png" catchtap='deleteImage' data-index="{{index}}"></image>
        </view>
      </block>
    </view>
    <view class="weui-uploader__input-box">
      <view class="weui-uploader__input" bindtap="chooseImage" data-num='{{images.length}}'></view>
    </view>
  </view>
</view>

2.2、upload.js

3.外部utils内封装的upload请求函数(参考网上的资料修改成符合需求的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 aliyunFileKey = params.dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.jpg';

  const aliyunServerURL = env.config.uploadImageUrl;

  const accessid = env.config.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64);

  wx.uploadFile({
    url: aliyunServerURL,
    filePath: params.filePath,
    name: 'file',
    formData: {
      'key': aliyunFileKey,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      'signature': signature,
      'success_action_status': '200',
    },
    success: function (res) {
      console.log(res,'success')
      if (res.statusCode != 200) {
        if (params.fail) {
          params.fail(res)
        }
        return;
      }
      if (params.success) {
        params.success(aliyunServerURL+aliyunFileKey);
      }
    },

    fail: function (err) {
      console.log(err,'err')
      err.wxaddinfo = aliyunServerURL;
      if (params.fail) {
        params.fail(err)
      }
    },
  })
}

const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + env.config.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.config.AccessKeySecret;

  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
    asBytes: true
  });
  const signature = Crypto.util.bytesToBase64(bytes);

  return signature;
}

module.exports = uploadFile;

最后，在config.js内声明需要的阿里云请求地址和信息（这里的请求地址一定要符合oss的格式）：

根据上面的步骤，最后图片成功上传到阿里云指定的aaa路径下：

最后，去阿里云网站可以看到上传到指定文件夹下面的图片哦~

希望能帮到你们,fighting~