智汀云盘-开发指南web:业务功能：文件

文件有基本控制功能：文件共享、文件移动、文件复制、文件夹详情、文件详情、文件上传、文件下载、文件删除等，接口数据都是走http协议

1. 文件新建、上传文件

初始数据根目录文件夹，我们可以再此上传文件，进入文件详情可以新建自己喜欢的文件夹

• 新建文件夹

​

文件新建是根据vant组件封装的样式组件，可以新建文件名也可以更新文件名，只需要传参类型this.creatData.target"creat"为新建，"update"为更新,其他参数则以接口需求为准，组件详情侧自行查看项目源码

• 上传文件夹

​

  

选择上传菜单类型上传你对应需要的文件类型，执行菜单函数后调用上传组件，使用的是 "simple-uploader.js" 上传分片上传插件,需要安装"sha256"进行"hash" 项目安装：

npm i simple-uploader.js

npm i js-sha256

 upload(item){
      if (item.val === 'video') {
        this.$EventBus.$emit('openUploader', { type: 'video', path: this.path })
      } else if (item.val === 'image') {
        this.$EventBus.$emit('openUploader', { type: 'image', path: this.path })
      } else if (item.val === 'folder') {
        this.$EventBus.$emit('openUploader', { type: 'folder', path: this.path })
      } else {
        this.$EventBus.$emit('openUploader', { type: '', path: this.path })
      }
    }

文件上传的是否成功可在传输列表查看成功列表文件跟失败列表文件

组件相关的上传逻辑详情侧自行查看项目源码

2.文件夹共享、文件移动、文件复制、文件删除，文件下载

进入根目录文件夹详情后，里面的文件夹可分享，但是文件不可以分享

​

底部栏的操作类别是开发成一个公用调用的组件栏

isShowOperation 控制组件的显示, 参数值为Boolean类型

checkedList 选中的列表, 参数值为Array类型

filePath 当前的文件夹路劲 参数值为String

breadcrumb 当前文件的面包屑地址

getFileList 回调函数

组件相关的控制条件逻辑详情自行查看项目源码

• 文件夹共享

​

  

可多个文件夹共享单人，多人，用户列表是来自智汀云SA的用户列表

isShowOperation 控制组件的显示, 参数值为Boolean类型

checkedList 选中的列表, 参数值为Array类型

getShareList 回调函数

  

    

      
      
{{ $t(`global.${item.name}`) }}
    
  

组件的详细跟操作代码逻辑

import { mapGetters } from 'vuex'
import MemberDialog from './MemberDialog.vue'

const empty = require('@/assets/empty-files.png')
const defaultHead = require('@/assets/default-head.png')

export default {
  name: 'shareDetail',
  components: {
    MemberDialog
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: this.value,
      defaultHead,
      empty,
      loading: false,
      list: [],
      check: false, // 全选控制
      result: [],
      targetList: [],
      memberShow: false, // 用户权限设置弹窗
      powerList: ['read', 'write', 'deleted'], // 操作权限列表
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    isNoFiles() {
      return this.list.length === 0
    },
    // 选择的用户列表
    checkMemberList() {
      return this.targetList.filter(user => this.result.includes(user.user_id))
    }
  },
  watch: {
    fileList(list) {
      // 筛选文件夹权限并集
      this.powerList = []
      const power = {
        read: true,
        write: true,
        deleted: true
      }
      list.forEach((file) => {
        if (file.read === 0) {
          power.read = false
        } else if (file.write === 0) {
          power.write = false
        } else if (file.deleted === 0) {
          power.deleted = false
        }
      })
      Object.keys(power).forEach((key) => {
        if (power[key]) {
          this.powerList.push(key)
        }
      })
    },
    value(val) {
      this.show = val
    },
    show(val) {
      this.$emit('input', val)
    },
    result(list) {
      this.check = list.length === this.targetList.length
    }
  },
  methods: {
    onClickLeft() {
      this.show = false
    },
    onClickRight() {
      // 至少选择一个共享的用户
      if (!this.result.length) {
        return
      }
      this.memberShow = true
    },
    // 提交分享数据
    saveShare(power) {
      const paths = []
      this.fileList.forEach((item) => {
        paths.push(item.path)
      })
      // to_users 分享的用户id paths 共享的用户目录
      let params = {
        to_users: this.result,
        paths,
        from_user: this.userInfo.nickname
      }
      params = Object.assign(params, power)
      this.loading = true
      this.http.shareFiles(params).then((res) => {
        this.loading = false
        if (res.status !== 0) {
          return
        }
        this.show = false
        this.result = []
        // 去掉勾选
        this.fileList.forEach((item) => {
          item.checked = false
        })
        this.$toast(this.$t('global.sharedSuccessfully'))
      }).catch(() => {
        this.loading = false
      })
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    checkAll(checked) {
      if (checked) {
        this.$refs.checkboxGroup.toggleAll(true)
      } else {
        this.$refs.checkboxGroup.toggleAll(false)
      }
    },
    // 初始用户数据
    getUserList() {
      this.http.getUserList().then((res) => {
        if (res.status !== 0) {
          return
        }
        this.targetList = res.data.users.filter(item => item.user_id !== this.userInfo.user_id - 0)
      })
    },
  }
}

• 文件移动

​

  

文件移动权限判断，是否具有私密密码去权限，空文件显示处理，逻辑如下：

// 确认操作
handleAction() {
  let sources = []
  if (this.action === 'move') {
    sources = this.$methods.getSession('moveSource')
    sources = sources ? JSON.parse(sources) : []
  } else {
    sources = this.$methods.getSession('copySource')
    sources = sources ? JSON.parse(sources) : []
  }
  const params = {
    action: this.action,
    destination: this.destination,
    destination_pwd: this.currentFolderPass,
    sources
  }
  this.saveLoading = true
  this.http.moveFile(params).then((res) => {
    this.saveLoading = false
    if (res.status !== 0) {
      return
    }
    if (this.action === 'move') {
      this.$methods.setSession('moveSource', '')
      this.$methods.setSession('breadcrumb', '')
      this.$toast(this.$t('global.movedSuccessfully'))
    } else {
      this.$methods.setSession('copySource', '')
      this.$toast(this.$t('global.copySuccessfully'))
    }
    this.$router.go(-1)
  }).catch(() => {
    this.saveLoading = false
  })
}

• 文件复制

​

  

复制跟移动是公用同一文件，根据路由参数判断是复制文件还是移动文件进行做处理，在vue生命周期creat阶段进行获取判断

created() {
    const { query } = this.$route
    const { path } = query
    if (query.type === 'copy') {
      this.homeName = this.$t('global.copyTo')
      this.loadingText = `${this.$t('global.copying')}...`
    } else if (query.type === 'move') {
      this.homeName = this.$t('global.moveTo')
      this.loadingText = `${this.$t('global.moving')}...`
    }
    // 设置文件夹根目录
    this.setPassword(path)
    this.action = query.type
    this.shareId = query.shareId
    this.range = `${query.range}` === 'true'
    this.filePath = path
    // 如果有path则定位到path的目录下
    if (path && this.range) {
      this.getPathFile(path)
    } else {
      // 没有则默认进入到根目录
      this.getinitList()
    }
}

 

• 文件夹、文件删除

删除组件vant

  

    
{{ $t('global.delTip1_1') }}{{ list.length }}{{$t('global.delTip1_2')}}
    
{{ $t('global.delTip2') }}
  

 异步删除反馈

sureDelete(action, done) {
  if (action === 'confirm') {
    const deleteArr = []
    this.list.forEach((typeItem) => {
      deleteArr.push(typeItem.path)
    })
    this.http.deleteFile({ paths: deleteArr }).then((res) => {
      done()
      if (res.status !== 0) {
        return
      }
      this.$toast(this.$t('global.deletedSuccessfully'))
      this.$emit('onSuccess')
    })
  } else {
    done()
  }
}

组件相关的控制条件逻辑详情自行查看项目源码

• 文件夹、文件下载

WEB网页下载默认以浏览器下载为准

3.文件夹详情、文件详情文件夹详情

刚上面已有提到。。。

• 文件详情

showManage 控制组件的显示, 参数值为Boolean类型

manageData 选中的文件对象参数, 参数值为Object类型

filePath 当前的文件夹路劲 参数值为String

breadcrumb 当前文件的面包屑地址

getFileList 回调函数