前端vue如何实现上传文件至群晖 Synology

前言：

工作中遇到的需求千奇百怪，最近接到一个需求，需要实现上传文件时，选择上传至oss或者群晖服务器的某个文件夹中。本想着直接对接后端便可以了，哪曾想是要直接去请求群晖的接口，下面列出调研群晖上传时使用过的一些接口

一、Class 定义一个构造函数

根据你业务需要，去配置你构造函数的入参

class QunHuiUpload { 
    constructor(file = {}, conf = {}, data = {}, hook = {}) {
    /**
     * 上传构造器
     * @param {File} file 文件
     * @param {Object} conf 字段配置
     * @param {Object} data 上传时的附加数据
     * @param {Object} hook 上传事件钩子
     */
  }

二、实现群晖登录

群晖上传的前提，首先是需要进行登录，登录成功后会获取到群晖sid，也就是token，用于其他接口作为参数传递。登录成功后，须将sid保存

  /**
   * @descitption 群晖登录
   * @param {String} account 账户
   * @param {String} password 密码 
   */
qunhuiLogin(account, password) {
    return new Promise((resolve, reject) => {
      axios.get(`接口域名地址/webapi/auth.cgi?api=SYNO.API.Auth&version=3&method=login&account=${account}&passwd=${password}&session=FileStation&format=cookie`)
        .then(res => {
          localStorage.setItem('QunHuiToken', res.data.data.sid)
          resolve(res.data.data.sid)
        }).catch(err => {
          reject(err)
        })
    })
  }

接口请求成功后，会返回登录标识---sid

三、群晖上传

群晖上传，也就到了需求最关键的一步

/**
   * @descitption 群晖文件上传
   * @param {String} token token
   * @param {String} path 文件路径
   * @param {String} file 文件 
   * @param {String} filename 文件名 
   * @param {String} create_parents 如果不存在，则创建父文件夹 
   */
  qunhuiUpload(token, path, file, filename) {
    return new Promise((resolve, reject) => {
      let formData = new FormData()
      formData.append('path', path)
      formData.append('create_parents', false)
      formData.append('file', file)
      formData.append('filename', filename)
      axios.post(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.Upload&method=upload&version=2&_sid=${token}`, formData)
        .then(res => {
          resolve(res.data)
        }).catch(err => {
          reject(err)
        })
    })
  }

文件上传接口成功后，并不会返回文件的具体信息，只会包含文件名称等信息

四、获取图片缩略图

上传完成图片后，需要展示图片缩略图，则需要通过接口获取到缩略图文件，获取到的是二进制文件，前端还须在请求时使用blob

/**
   * @descitption 获取缩略图
   * @param {String} path 文件路径 
   * @param {String} filename 文件名 
   * @param {String} token token
   */
  getThumbUrl(path, filename, token) {
    return new Promise((resolve, reject) => {
      axios.get(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.Thumb&version=2&method=get&path=${path}/${filename}&_sid=${token}`, {
        responseType: 'blob'
      }).then(res => {
        const thumbUrl = window.URL.createObjectURL(res.data) // 将二进制文件转为正常文件
        resolve(thumbUrl)
      }).catch(err => {
        reject(err)
      })
    })
  }

五、获取源文件

上传视频等文件时，需要通过接口拿到源文件（也是二进制文件），文档上表示下载接口，但也仅仅是拿到源文件地址，下载功能还需前端自己写js

/**
   * @descitption 获取到下载的源文件
   * @param {String} path 文件路径 
   * @param {String} filename 文件名
   * @param {String} token token
   */
  getSourceFile(path, filename, token) {
    return new Promise((resolve, reject) => {
      axios.get(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.Download&version=2&method=download&path=${path}/${filename}&_sid=${token}`, {
        responseType: 'blob'
      }).then(res => {
        const objectURL = window.URL.createObjectURL(res.data)
        resolve(objectURL)
        this.hook.onSuccess(objectURL)
      }).catch(err => {
        reject(err)
      })
    })
  }

六、创建文件夹

群晖接口也支持通过接口创建新的文件夹

/**
   * @descitption 创建文件夹
   * @param {String} path 文件夹路径
   * @param {String} name 需要创建文件夹的名称
   */
  createFolder(path, name, token) {
    return new Promise((resolve, reject) => {
      axios.get(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.CreateFolder&version=2&method=create&force_parent=true&folder_path=${path}&name=${name}&_sid=${token}`).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }

以上则是构造函数中所需要的一些方法，去实现登录，上传，查看，创建文件夹等，接下来就是如何去调用他

在使用的位置，定义好你需要的配置项，比如方法中需要的账号，密码，文件夹路径，然后去new 一个构造函数

 const hook = {
          onSuccess: (res) => { this.QunHuiSuccess(res) },
          onError: (err) => { this.QunHuiError(err) }
        }
 const data = {
          account: '账号',
          password: '密码',
          folder_path: '文件夹路径'
      }
const uploader = new Uploader(file, {}, data, hook)

七、错误code

export const code = {
  400: '文件操作的参数无效',
  401: '文件操作的未知错误',
  402: '系统繁忙',
  403: '用户执行此文件操作时无效',
  404: '执行此文件操作的组无效',
  405: '用户和组执行此文件操作无效',
  406: '无法从帐户服务器获取用户/组信息',
  407: '无操作权限',
  408: '没有这样的文件或目录',
  409: '不支持的文件系统',
  410: '连接基于互联网的文件系统',
  411: '只读文件系统',
  412: '在非加密的文件系统中使用的文件名太长',
  413: '在加密的文件系统中使用的文件名太长',
  414: '文件已存在',
  415: '内存不够用了',
  416: '内存不够用了',
  417: '输入输出错误',
  418: '非法的名称或路径',
  419: '非法文件名',
  420: '文件系统上的非法文件名',
  421: '设备繁忙',
  599: '文件操作中没有这样的任务'
}

 

原文：https://juejin.cn/post/7155735812854775844