上传插件,不包含上传的前端实现,只提供后端接口等,其他地方接入插件上传。包括上传进度、断点续传等

index.ts 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import { getFilemd5sum, getBase64 } from './utils.js'
  2. interface upload_sdk {
  3. //初始化文件 md5
  4. generateMd5: (file: File) => any
  5. //初始化图片 base64
  6. generateBase64: (file: File) =>any
  7. //上传
  8. action: () => Promise<any>
  9. //成功返回函数
  10. onSuccess: () => string
  11. //续传
  12. onContinue: () => number
  13. //错误
  14. onError: () => number
  15. //http 请求
  16. post: () => Promise<any>
  17. }
  18. class UploadSdk implements upload_sdk {
  19. private host: string
  20. private origin: string
  21. private token: string
  22. private file: File
  23. private base64: any
  24. private BYTES_PER_CHUNK: number = 1024 * 1024
  25. private IMAGE_MULTIPART = '/multipart/upload/'
  26. private VIDEO_MULTIPART = '/upload/'
  27. private chunkNum: any
  28. private chunkSize: any
  29. private fileType: any
  30. private fileSize: any
  31. private base64Body: any
  32. private md5: any
  33. private offset = 0; //用于断点续传,默认为 0
  34. constructor(host: string, origin: string, token: string, file: File){
  35. this.host = host
  36. this.origin = origin
  37. this.token = token
  38. this.file = file
  39. this.fileSize = file.size
  40. this.fileType = file.type
  41. this.chunkNum = this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK):1
  42. this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize:this.BYTES_PER_CHUNK
  43. }
  44. generateMd5 = async () => {
  45. let md5 = await getFilemd5sum(this.file)
  46. return md5
  47. }
  48. generateBase64 = async () => {
  49. let base64 = await getBase64(this.file)
  50. return base64
  51. }
  52. //上传
  53. action = () => {
  54. this.md5 = this.generateMd5()
  55. this.base64Body = this.generateBase64()
  56. return this.post()
  57. }
  58. //成功返回函数
  59. onSuccess = () => {
  60. return 'success'
  61. }
  62. //续传
  63. onContinue = () => {
  64. return 90
  65. }
  66. //错误
  67. onError = () => {
  68. return 200
  69. }
  70. post = () => {
  71. return new Promise((resolve, reject) => {
  72. let xhr = new XMLHttpRequest()
  73. xhr.open("POSt", 'http://api.links123.net/mps/v1/'+this.IMAGE_MULTIPART+'forum', true)
  74. xhr.withCredentials = true;
  75. xhr.setRequestHeader('Authorization', `Bearer ${this.token}`);
  76. xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
  77. xhr.setRequestHeader('Accept', 'application/json');
  78. xhr.setRequestHeader('LINK_UPLOAD_FILE_SIZE',this.fileSize)
  79. xhr.setRequestHeader('LINK_UPLOAD_CHUNK_INDEX',1+'')
  80. xhr.setRequestHeader('LINK_UPLOAD_CHUNK_NUM',this.chunkNum)
  81. xhr.setRequestHeader('LINK_UPLOAD_CHUNK_SIZE',this.chunkSize)
  82. xhr.setRequestHeader('LINK_UPLOAD_OFFSET',this.offset+'')
  83. xhr.setRequestHeader('LINK_UPLOAD_FILE_MD5',this.md5)
  84. xhr.setRequestHeader('LINK_UPLOAD_FILE_TYPE','jepg')
  85. xhr.send(JSON.stringify({body: this.base64Body}))
  86. xhr.onreadystatechange = function () {
  87. if (xhr.readyState === 4) {
  88. if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
  89. resolve(xhr.responseText)
  90. } else {
  91. reject(xhr.status)
  92. }
  93. }
  94. }
  95. })
  96. }
  97. }