小程序实现文件上传到oss

一，首先在微信开发者工具的设置中打开npm模块
二，在终端npm init初始化并使用npm install
三，点击开发者工具中的菜单栏：工具 --> 构建 npm
四，下载crypto-js和js-base64
五，在页面中引入

import crypto from 'crypto-js';
import { Base64 } from 'js-base64';

六，计算签名的方法，下面会用到

// 计算签名。
  computeSignature(accessKeySecret, canonicalString) {
    return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
  },

七，提交文件到oss后提交表单

          submit(){
          let that = this
          let params = {
      deviceMark: that.data.deviceMark,
      deviceSn: that.data.deviceMark,
      deviceName: that.data.deviceName,
      linkManId: that.data.linkManId,
      description: that.data.description,
      serTime: that.data.serTime,
    }
    let imageList = that.data.imageList
const date = new Date();
          date.setHours(date.getHours() + 1);
          const policyText = {
            expiration: date.toISOString(), // 设置policy过期时间。
            conditions: [
              // 限制上传大小。
              ["content-length-range", 0, 1024 * 1024 * 1024],
            ],
          };
          //临时stsToken
          wx.$get("web/oss/getStsInfo/").then(credentials => {
            const policy = Base64.encode(JSON.stringify(policyText))
            const signature = that.computeSignature(credentials.data.data.AccessKeySecret, policy)
            const formData = {
              OSSAccessKeyId: credentials.data.data.AccessKeyId,
              signature: signature,
              policy: policy,
              'x-oss-security-token': credentials.data.data.SecurityToken
            }
            let images = []
            for (let i = 0; i < imageList.length; i++) {
              //获取后缀
              let index = imageList[i].lastIndexOf(".");
              let ext = imageList[i].substr(index);
              let date1 = new Date()
              let random = parseInt(Math.random() * 1000)
              //修改文件名
              let fileName = "repair/images/" + date1.getTime() + random + ext
              //上传文件
              wx.uploadFile({
                url: 'https://xn-smart-platform.oss-cn-hangzhou.aliyuncs.com',
                filePath: imageList[i],
                name: 'file',
                formData: {
                  key: fileName,
                  policy: formData.policy,
                  OSSAccessKeyId: formData.OSSAccessKeyId,
                  signature: formData.signature,
                  'x-oss-security-token': formData['x-oss-security-token']
                },
                //调用成功的回调
                success(res) {
                //上传结束后吧表单提交给后端
                  if (res.errMsg === "uploadFile:ok") {
                    images.push(fileName)
                    //判断图片列表都上传了
                    if (images.length === imageList.length) {
                      params.images = images
                      wx.$post("web/repair/record/add/", params).then(res => {
                        if (res.success) {
                          wx.$msg("提交成功")
                          that.setData({
                            deviceMark: "",
                            deviceName: "",
                            linkMan: "",
                            linkManId: "",
                            description: "",
                            serTime: '',
                            imageList: []
                          })
                        } else {
                          wx.$msg(res.message)
                        }
                      })
                    }
                  }
                },
              })
            }
          })

}
          

结束啦，主要这里别忘记构建npm，启用npm模块，别的地方改一改复制就好啦