前言
在日常的前端开发中，后台开发人员会提供丰富的接口，前端的请求也会多种多样，其中可能会需要上传或下载文件等操作，而这些操作则需要使用到“文件存储”的功能。本文介绍了如何使用 npm 包 plus.file.storage，来实现文件的上传下载和文件存储相关的操作。
安装
可以使用 npm 在命令行中安装 plus.file.storage：
npm install plus.file.storage
用法
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------- ----- ----------- - --- ------------------------------------ -- ---- ----- ---------- - ----- -- -- - ----- ----- - -------------------------------------------- ----- ---- - -------------- ----- ---------------------------- ---------- - -- ---- ----- ------------ - ----- -- -- - ----- -------------------------------------------- - -- ------------ ----- ------------ - ----- -- -- - ----- --------- - ----- ---------------------------------- ---------------------- -
API
FileService(url: string)
创建一个新的 FileService 实例。
import { FileService } from 'plus.file.storage'
const fileService = new FileService('http://localhost:8080')参数
url： 文件服务的地址。
uploadFile(file: File, path: string): Promise<void>
上传文件到文件存储服务指定的路径。
const uploadFile = async () => {
const input = document.querySelector('input[type="file"]')
const file = input.files[0]
await fileService.uploadFile(file, '/upload')
}参数
file：要上传的文件。path：文件在服务器上的存放路径，必须以斜杆开头。
downloadFile(path: string): Promise<void>
从指定的路径下载文件。
const downloadFile = async () => {
await fileService.downloadFile('/download?id=123')
}参数
path：要下载的文件在服务器上的存放路径，必须以斜杆开头。
getFilesList(path: string): Promise<FileListItem[]>
获取服务器存储的文件列表。
const getFilesList = async () => {
const filesList = await fileService.getFilesList('/files')
console.log(filesList)
}参数
path：要获取文件列表的存放路径。
deleteFile(path: string): Promise<void>
从服务器删除指定的文件。
const deleteFile = async () => {
await fileService.deleteFile('/delete?id=123')
}参数
path：要删除的文件在服务器上的存放路径，必须以斜杆开头。
结语
plus.file.storage 包提供了方便的文件上传下载功能，而且通过 API 的设计，也可以方便地实现其他的文件存储功能开发，如存储空间的管理等。该模块也提供了较为完善的类型定义文件，可快速上手使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b281e8991b448d4b9c