通过ES6 封装了一个上传文件的方法 XMLHttpRequest() 通用
### 上传进度回显,上传速度回显
### 源码如下,新建index.js装起来
export class UploadServers { constructor (options) { this.xhr = null this.startTime = null this.startFileSize = 0 this.formData = null // this = options Object.keys(options).map(item => { this[item] = options[item] }) this.init(options) } init (options) { this.config = {...this.config, ...options} this.xhr = new XMLHttpRequest() this.formData = new FormData() if (this.config.data && Object.prototype.toString.call(this.config.data) === '[object Object]') { // 循环添加其他参数 this.config.data.keys(item => { this.formData.append(item, this.config.data[item]) }) } // console.log(this.config) // console.log(this.config.file.toString()) // console.log(Array.prototype.slice.call(this.config.file).toString()) if (this.config.file.toString() === '[object FileList]' || this.config.file.toString() === '[object File]' || this.config.file.toString() === '[object Array]' || this.config.file.toString().includes('[object File]')) { this.uploadFile(this.config.file, true) } else { this.uploadFile(this.config.file) } } uploadFile (file, isArray) { // this.xhr const _this = this if (isArray) { Object.values(file).forEach(function (item) { _this.formData.append(_this.config.uploadFileName, item) }) } else { this.formData.append(this.config.uploadFileName, file) } this.xhr.open('post', this.config.url, true) this.xhr.onload = function (e) { _this.updataSucess(e) } this.xhr.onerror = function (e) { _this.updataError(e) } this.xhr.upload.onprogress = function (e) { _this.progressChange(e) } this.xhr.upload.onloadstart = function (e) { _this.startUpload(e) } this.xhr.send(this.formData) } startUpload (e) { // console.log(e) this.startTime = new Date().getTime() this.startFileSize = 0 } updataSucess (e) { // console.log(e) // console.log(this) // console.log(uploadServers) this.config.success(e) } updataError (e) { console.log(e) this.config.error(e) } progressChange (e) { // console.log(e) if (e.lengthComputable) { const newTime = new Date().getTime() let pertime = (newTime - this.startTime) / 1000 // 如果时间为0 则返回避免出现Infinity 兼容IOS进度函数读取过快问题 if (pertime === 0) pertime = 0.001 this.startTime = newTime const perload = e.loaded - this.startFileSize const lave = e.loaded / e.total this.startFileSize = e.loaded let speed = perload / pertime // console.log(perload, pertime) // const speeds = speed let units = 'b/s' if (speed / 1024 > 1) { speed = speed / 1024 units = 'k/s' } if (speed / 1024 > 1) { speed = speed / 1024 units = 'M/s' } if (speed / 1024 > 1) { speed = speed / 1024 units = 'G/s' } // console.log(speed) speed = speed.toFixed(1) // console.log(speed) // const resout = ((e.total - e.loaded) / speeds).toFixed(1) this.config.progress(e, speed, lave, e.loaded, units) } } }
使用方式
let initUploadFileChange = new UploadServers({ url: _this.url, data: _this.data, file: fileList || null, fileClassName: null, uploadFileName: _this.fileOption || 'multipartFiles', progress: function (e, speed, lave, loaded, units) { // console.log(e, speed, lave, loaded, units) _this.percentage = parseInt(lave * 100) }, success: function (e) { if (e.target.status === 200 && e.target.response) { const parseJson = JSON.parse(e.target.response) } // 设置状态为未上传状态 _this.processStatus = false }, error: function (e) { // 上传失败 应将文件通过File流读取出来进行回显 并展示给用户提示上传失败 请重新上传 或者自动重新上传 _this.processStatus = false } })
####
####
END
####
####
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器