uniapp 工具类封装 开箱即用

有兴趣的小伙伴可以看看上传图片的封装 可以决定要上传的图片的大小

全局注册方式

import Utils from '@/common/utils/index';
export default {
  install: function (Vue) {
    Vue.prototype.$utils = new Utils();
  }
}

工具类

import uploadFile from '@/request/upload';
/**
 * @exports
 * 全局工具类
 */
export default class Utils {
  constructor() {
    console.log("global utils class");
  }
  /**
   * 显示消息提示框
   * @param { String } title 提示的内容，长度与 icon 取值有关。
   * @param { String } position 纯文本轻提示显示位置
   * @param { String } icon 图标，有效值详见uniapp官方说明。
   * @param { Number } duration 提示的延迟时间，单位毫秒，默认：1500
   * @param { Boolean } mask 防止触摸穿透
   * @example this.$utils.toast(title);
   */
  toast (title, position = 'bottom', icon = 'none', duration = 1500, mask = false) {
    uni.showToast({
      title,
      position,
      icon,
      duration,
      mask
    });
  }
  /**
   * 显示 loading 提示框, 需主动调用
   * @param { String } title 提示的文字内容，显示在loading的下方
   * @param { Boolean } mask 是否显示透明蒙层，防止触摸穿透默认 true
   * @example this.$utils.loading();
   */
  loading (title = '正在加载...', mask = true) {
    uni.showLoading({
      title,
      mask
    });
  }
  /**
   * 拨打电话
   * @param { String } phoneNumber 目标号码
   * @example this.$utils.makePhone(13311112222);
   */
  makePhone (phoneNumber) {
    uni.makePhoneCall({
      phoneNumber
    });
  }
  /**
   * 从底部向上弹出操作菜单
   * @param { Array } itemList 按钮的文字数组
   * @param { Function } callback 回调选择按钮的索引
   * @param { String } textColor 按钮的文字颜色
   * @example this.$utils.showActionSheet(['A','B','C'],index => console.log(index));
   */
  showActionSheet (itemList = [], callback, textColor = "#4F4F4F") {
    uni.showActionSheet({
      itemList,
      textColor,
      success: function (res) {
        callback(res.tapIndex);
      },
      fail: function (res) {
        console.error(res.errMsg);
      }
    });
  }
  /**
   * 根据网络状态提示信息
   * @example this.$utils.toastMsgByNetwork();
   */
  toastMsgByNetwork () {
    uni.getNetworkType({
      success (res) {
        switch (res.networkType) {
          case 'wifi':
            this.toast('请求超时,可切换为4g试试哦~');
            break;
          case '4g':
            this.toast('当前网络状态不佳,请稍后再试.');
            break;
          case '3g':
            this.toast('当前处在3g状态,可切换为4g后再试试哦~');
            break;
          case '2g':
            this.toast('当前处在2g状态,可切换为4g后再试试哦~');
            break;
          case 'ethernet':
            this.toast('当前处在有线网络状态,可切换为4g后再试试哦~');
            break;
          case 'unknown':
            this.toast('当前处在不知名网络状态,可切换为4g后再试试哦~');
            break;
          case 'none':
            this.toast('网络走丢了哦~');
            break;
          default:
            this.toast('接口请求超时间');
            break;
        }
      },
      fail (err) {
        this.toast('获取网络状态失败');
      }
    })
  }
  /**
   * upx2px
   * @example $utils.upx2px(20) => ≈ 10
   * @description 计算rpx转px
   */
  upx2px (num) {
    return uni.upx2px(num);
  }
  /**
   * 设置剪切板内容
   * @param {*} text 
   */
  copy (text) {
    uni.setClipboardData({
      data: text,
      success: () => {
        uni.hideToast();
        this.toast("复制成功", 'center');
      },
      fail: () => {
        this.toast("复制失败", 'center');
        console.log(err);
      }
    });
  }
  /**
   * 封装图片上传
   * @param { Array } sourceType 是否使用相机
   * @param { Number } maxSize 当前图片的最大占用内存
   * @param { Function } callback 回调当前图片的本地路径
   * @returns { Promise }
   * @example this.$utils.chooseImage(['camera'],1,target => {});
   */
  chooseImage = (sourceType = ['camera', 'album'], maxSize = 1, callback = null) => {
    return new Promise(reslove => uni.chooseImage({
      count: 1,
      sourceType: sourceType,
      sizeType: ['original'],
      success: chooseImageRes => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
        callback != null && callback(tempFilePaths[0]);
        /**
         * 压缩文件
         * @param { String } imgData.target 压缩文件路径
         * @param { Number } zipScale 压缩比例
         **/
        const zipImage = (imgData, zipScale) => {
          const uploadNowImage = imgDataNow => {
            uploadFile(`url`, imgDataNow.target).then(data => reslove(data)).catch(err => console.log(err));
          }
          zipScale == null && uploadNowImage(imgData);
          const dstSrc = uni.getSystemInfoSync().platform === 'android' ? `_doc://${new Date().getTime()}.jpg` : `file://${new Date().getTime()}.jpg`;
          zipScale && plus.zip.compressImage({
            src: imgData.target,
            dst: dstSrc,
            quality: zipScale
          }, res => uploadNowImage(res),
            error => this.toast('图片压缩失败'));
        }
        const { size } = chooseImageRes.tempFiles[0];
        const nowSize = parseFloat(size / 1024 / 1024).toFixed(2);
        if (nowSize <= maxSize) {
          zipImage({ target: tempFilePaths[0], size: size });
        } else {
          const prevZipSize = parseFloat(maxSize / nowSize).toFixed(2) * 100;
          const zipSize = prevZipSize > 10 ? prevZipSize - 10 : prevZipSize;
          zipImage({ target: tempFilePaths[0], size: size }, zipSize);
        }
      },
      fail: errData => this.toast(errData)
    }))
  }
}

上传图片

// 导入工具类 并实例化
import Utils from '@/common/utils/index';
const utils = new Utils();

/**
 * @exports
 * 封装上传
 * @param { String } url 上传接口地址 
 * @param { String } filePath 本地图片地址
 * @returns { Promise }
 */
export default function (url, filePath, otherData = {}) {
  return new Promise((reslove, reject) => {
    utils.loading("正在上传...");
    uni.uploadFile({
      url: url,
      filePath: filePath,
      header: {},
      formData: otherData,
      name: 'file',
      success: ({ statusCode, data }) => {
        const { code, result, message } = JSON.parse(data);
        if (statusCode === 200) {
          if (code === 200) {
            reslove({ result: result, filePath: filePath });
          } else {
            utils.toast(message);
            reject(null);
          }
        } else {
          utils.toast('网络错误');
          reject(null);
        }
      },
      complete: _ => uni.hideLoading(),
      fail: ({ errMsg }) => {
        if (errMsg === 'request:fail timeout') {
          uni.getNetworkType({
            success ({ networkType }) {
              networkType === 'wifi' && utils.toast('上传失败，请检查您的网络或者切换到4G网络重试');
              networkType === '4g' && utils.toast('上传失败，请重试.');
              (networkType !== '4g' && networkType !== 'wifi') && utils.toast('上传失败，请切换到4G网络重试');
              reject(null);
            },
            fail: err => {
              utils.toast('获取网络状态失败.');
              reject(err);
            }
          })
        } else {
          utils.toast('请求失败.');
          reject(null);
        }
      }
    });
  })
}