前言：
工作中遇到的需求千奇百怪，最近接到一个需求，需要实现上传文件时，选择上传至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
三、群晖上传
群晖上传，也就到了需求最关键的一步
Promise((resolve, reject) =>= 'path''create_parents', 'file''filename'/webapi/entry.cgi?api=SYNO.FileStation.Upload&method=upload&version=2&_sid==>(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 ==> { => { ='账号''密码''文件夹路径'=七、错误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: '文件操作中没有这样的任务'}