uniapp uview上传组件及校验是否登陆公共模块笔记

1、oss-upload组件

<template>
  <view>
    <u-upload
      ref="upload"
      :action="action"
      :max-size="5 * 1024 * 1024"
      max-count="1"
      :custom-btn="true"
      :multiple="false"
      :show-progress="false"
      :deletable="false"
      :form-data="formData"
      :before-upload="beforeUpload"
      height="0"
      width="0"
      @on-success="OnSuccess"
    >
      <u-avatar slot="addBtn" :src="vuex_user.avatar_url" size="140">u-avatar>
    u-upload>
  view>
template>

<script>
let _this = {};
export default {
  name: "oss-upload",
  data() {
    return {
      action: "",
      formData: {},
      upFileName: "", // 文件名
    };
  },
  // 组件创建的时候触发
  created() {
    _this = this;
  },
  methods: {
    // 上传前的钩子
    // 注意：在小程序中 this 可能会丢失 可以捕获来获取
    // 1. let _this
    // 2.在组件创建的时候 _this = this
    async beforeUpload(index, list) {
      // console.log(list);
      // 获取文件名
      const { file } = list[0];
      // 兼容H5 条件编译
      // #ifdef H5
      const fileName = file.name;
      // #endif
      // 除了H5 都兼容 条件编译
      // #ifndef H5
      const fileName = file.path;
      // #endif

      // 请求API，获取oss token
      const ossToken = await _this.$u.api.ossToken();

      // 设置上传域名
      _this.action = ossToken.host;

      // 处理唯一的文件名
      const suffix = fileName.slice(fileName.lastIndexOf("."));
      // 随机生成唯一文件名
      const upFileName = _this.$u.guid(20) + suffix;
      _this.upFileName = upFileName;
      // 设置上传的额外参数
      _this.formData = {
        key: _this.upFileName, // 上传后的文件名
        policy: ossToken.policy,
        OSSAccessKeyId: ossToken.accessid,
        success_action_status: "200", //让服务端返回200,不然，默认会返回204
        signature: ossToken.signature,
      };
      // console.log(ossToken);
      return true;
    },
    // 上传成功触发的函数
    async OnSuccess() {
      // 移除预览区的图片
      this.$refs.upload.remove(0);
      // 请求API更新头像
      const res = await this.$u.api.userAvatar({ avatar: this.upFileName });
      // 更新缓存的用户信息
      this.$u.utils.updateUser();
      // 提示信息
      this.$u.toast("修改成功！！");
    },
  },
};
</script>

组件使用

<view class="u-m-r-10 avatar">
	<oss-upload>oss-upload>
view>

.avatar{
	width: 140rpx;
	height: 140rpx;
}

2、判断是否登录

// 自定义工具 是否登入
	const isLogin = () => {
		// 如果没有token，跳转到登入页面
		const token = vm.vuex_token
		if (!token) {
			// 来自哪个页面
			// getCurrentPages 官方api 最后一个元素是离开的页面 pop取最后一个元素
			const currentPage = getCurrentPages().pop()
			// 获取页面路径，和请求参数
			const {options,route} = currentPage
			// 参数的key Object.keys返回一个所有元素为字符串的数组
			const optionsKeys = Object.keys(options)
			let params = ''
			if(optionsKeys !== 0){
				params = optionsKeys.reduce((pre,current) => {
					return `${pre} ${current}${options[current] }&`
					//return pre + current + '=' + options[current] + '&'
				},'?').slice(0,-1)
			}
			// console.log(currentPage.route);
			// 缓存当前页，用于登录或者注册之后的跳转
			uni.setStorageSync('back_url',route+params)
			
			vm.$u.toast('请登录!!!')
			setTimeout(() => {
				vm.$u.route({
					type:'redirect',
					url: 'pages/auth/login',
				})
			}, 1500)
			return false
		}
		return true
	}