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

utils.js 3.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import { getFilemd5sum, getBase64 } from './testutil'
  2. const IMAGE_MULTIPART = '/multipart/upload/'
  3. const VIDEO_MULTIPART = '/upload/'
  4. function FileFactory(file) {
  5. this.offset = 0; //用于断点续传,默认为 0
  6. this.BYTES_PER_CHUNK = 1024 * 1024
  7. this.file = file
  8. this.fileSize = file.size
  9. this.fileType = file.type
  10. this.chunkNum = this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK):1
  11. this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize:this.BYTES_PER_CHUNK
  12. }
  13. export default function UploadSdk(host, origin, token, file) {
  14. this.host = host
  15. this.origin = origin
  16. this.token = token
  17. this.file = file
  18. this.generateMd5 = function (callback) {
  19. getFilemd5sum(this.file).then(result => {callback(result)})
  20. }
  21. this.generateBase64 = function (callback) {
  22. getBase64(this.file).then(result => {callback(result)})
  23. }
  24. this.imageUploadAction = function () {
  25. return new Promise( (resolve, reject) => {
  26. this.generateMd5( (md5) => {
  27. this.md5 = md5
  28. this.generateBase64( (base64) => {
  29. this.base64Body = base64
  30. let fileFactory = new FileFactory(file)
  31. this.postImage(this.md5,this.base64Body,fileFactory).then( res => {
  32. resolve(res)
  33. }).catch( (err) => {
  34. reject(err)
  35. })
  36. })
  37. })
  38. })
  39. }
  40. this.videoUploadAction = function () {
  41. return new Promise( (resolve, reject) => {
  42. this.postVideo().then( res => {
  43. resolve(res)
  44. }).catch( (err) => {
  45. reject(err)
  46. })
  47. })
  48. }
  49. this.postVideo = function() {
  50. return new Promise( (resolve, reject) => {
  51. let xhr = new XMLHttpRequest()
  52. xhr.open("POSt", this.host+VIDEO_MULTIPART+this.origin, true)
  53. xhr.open("POSt", this.host+IMAGE_MULTIPART+this.origin, true)
  54. xhr.withCredentials = true;
  55. xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
  56. xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
  57. xhr.setRequestHeader('Accept', 'application/json')
  58. let fd = new FormData()
  59. fd.append('file',this.file)
  60. fd.append('code_rate','ld,sd,hd')
  61. xhr.send(fd)
  62. xhr.onreadystatechange = function () {
  63. if (xhr.readyState === 4) {
  64. if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
  65. resolve(xhr.responseText)
  66. } else {
  67. reject(xhr.status)
  68. }
  69. }
  70. }
  71. })
  72. }
  73. this.postImage = function(md5,base64,fileFactory) {
  74. return new Promise((resolve, reject) => {
  75. let xhr = new XMLHttpRequest()
  76. xhr.open("POSt", this.host+IMAGE_MULTIPART+this.origin, true)
  77. xhr.withCredentials = true
  78. xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
  79. xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
  80. xhr.setRequestHeader('Accept', 'application/json')
  81. xhr.setRequestHeader('LINK_UPLOAD_FILE_SIZE',fileFactory.fileSize)
  82. xhr.setRequestHeader('LINK_UPLOAD_CHUNK_INDEX',1+'')
  83. xhr.setRequestHeader('LINK_UPLOAD_CHUNK_NUM',fileFactory.chunkNum)
  84. xhr.setRequestHeader('LINK_UPLOAD_CHUNK_SIZE',fileFactory.chunkSize)
  85. xhr.setRequestHeader('LINK_UPLOAD_OFFSET',fileFactory.offset+'')
  86. xhr.setRequestHeader('LINK_UPLOAD_FILE_MD5',md5)
  87. xhr.setRequestHeader('LINK_UPLOAD_FILE_TYPE','jepg')
  88. xhr.send(JSON.stringify({body: base64}))
  89. xhr.onreadystatechange = function () {
  90. if (xhr.readyState === 4) {
  91. if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
  92. resolve(xhr.responseText)
  93. } else {
  94. reject(xhr.status)
  95. }
  96. }
  97. }
  98. })
  99. }
  100. }