// 将base64转换为blob
dataURLtoBlob (dataurl) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1]) // .replace(/%0A|\s/g, '')
console.info('-----------123---------')
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
},
// 将blob转换为file
blobToFile (theBlob, fileName) {
theBlob.lastModifiedDate = new Date()
theBlob.name = fileName
return theBlob
},
getBase64Mock () {
return {
'base64': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAAA2CAYAAACx+8n+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVHhe7ZjBauMwEED3q/fDetp/yL2nHnNYH3xpwNBAUD2yHcv2xFbDoGjKe/AoJJIbw+tE9Z8A4BTiBbcQL7iFeMEtxAtuIV5wC/GCW4gX3EK84BbiBbcQL7iFeMEtxAtuIV5wC/GCW4gX3FJVvH///cdfrDXEi8W0hnixmNYQLxbTGuLFYlpDvFhMa4gXi2kN8WIxrSFeLKY1xJvj+1fowjWctPdWni4hNOfkNdl7/QpvyZpJWZtL134me7vQaJ/nfA3h0i1fq0hriDfH7HinqOTnDmPMy9CHPYvwJ/soiXcL8eaYG+8mns/wcX28b473cewxWuJVId4cs+KVUFdf77JvJ6YYbyvXHknWvrW3+4QmXh3izTHGq3ELH+/jGgmnp2u7GPERMnE35+PxGsIiVjXeHJLPV4HWEG+Oh5NXYrqF5nJbRHa67E/rGG+/5s568kb6ANvMyVu51hBvjkfx9u83fVwS3BzZ4+k4rVlO3uHYIWz+acs9NlSuNcSb4+HkHVzGq7i6zubYEJ0iTn7fj44NdR0VUq0h3hyfiVfOr+nz3XiNZVj3eON7M4eTV9arz44lfOJ9CdoNV+Ez8YoScE9zHiblOkp98iZT9cHTBtmnP1Ug3peh3XAVPhvvaIxN2T+8nsf9usoEnyXel6HdcHFXX+HHzLHsnnmVPwB98iomk3d/D/G+DO2G8fdoDfFiMa0hXiymNcSLxbSGeLGY1hAvFtMa4sViWkO8WExriBeLaU1V8QL8BOIFtxAvuIV4wS3EC24hXnAL8YJbiBecEsI3JvIyp/Bd34cAAAAASUVORK5CYII=',
'key': '202172395245566',
'fileName': '66' + Math.random() + '.jpg'
}
},
base64UpFile (ctx, next) {
let base64Arr = [this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock(),
this.getBase64Mock()
]
ctx.base64Arr = base64Arr
ctx.index = 0 base64Arr.forEach(item => {
let formData = new FormData()
let blob = this.dataURLtoBlob(item.base64)
let file = this.blobToFile(blob, item.fileName)
formData.append('file', file, item.fileName) this.$Spin2.show('图片上传中')
axios.request({
method: 'post',
url: '/processFile/fileUpload',
data: formData
}).then(res => {
return res.data
}).then(res => {
// console.info('axios res', res) const params = {
reportingId: this.params.reportingId,
typeCode: this.typeCode1,
name: item.fileName,
url: res.data.split('-')[0]
}
this.$api('/process-api/file/saveOne', params).then(res => {
this.$Spin2.hide()
if (res && res.status === 20) {
// this.$Message.success('上传成功')
ctx.index = ctx.index + 1
next()
}
})
})
})
},
flushTree (ctx, next) {
if (ctx.index === ctx.base64Arr.length) {
this.$Message.success('上传成功')
this.$refs.part1.init()
}
},
base64ToFileHandle () {
const ac = this.$getAc()
ac.use(this.base64UpFile)
ac.use(this.flushTree)
ac.run()
},

base64 转文件上传的更多相关文章

  1. Base64文件上传(Use C#)

    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,它是一种基于64个可打印字符来表示二进制数据的方法. 使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格 ...

  2. .netcore 文件上传转为base64位字符串

    .netcore文件上传Api接口,和正常的webForm提交类似,只是用postman测试接口时,记得给form表单命名,否则获取上传文件数量一直为0 后端代码 using System; usin ...

  3. vue + element 文件上传 并将文件转 base64

    当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...

  4. 文件上传 和 base64编码

    base64编码 1.关于Base64编码  :  https://www.cnblogs.com/liyiwen/p/3814968.html (个人猜测),file表单发送文件,肯定是将文件转换为 ...

  5. 文件上传三:base64编码上传

    介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 优点: 1.浏览器可以马上展示图像,不需要先上 ...

  6. 前端element ui 文件base64加密字符串 上传

    <el-form-item label="附件" prop="attachment"> <el-upload :multiple=" ...

  7. chunkupload文件上传断点续传组件(java)

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. 从整体上讲,chunkupload会对文件进行切片处理,每个切片 ...

  8. chunkupload 文件上传断点续传组件(java) - 正式发布

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: ·  实现断点续传 ·  ...

  9. Selenium2学习-039-WebUI自动化实战实例-文件上传下载

    通常在 WebUI 自动化测试过程中必然会涉及到文件上传的自动化测试需求,而开发在进行相应的技术实现是不同的,粗略可划分为两类:input标签类(类型为file)和非input标签类(例如:div.a ...

  10. SpringMVC 文件上传&拦截器&异常处理

    文件上传 Spring MVC 为文件上传提供了直接的支持,这种支持是通过即插即用的 MultipartResolver 实现的.Spring 用 Jakarta Commons FileUpload ...

随机推荐

  1. 快递单信息抽取【二】基于ERNIE1.0至ErnieGram + CRF预训练模型

    相关文章: 1.快递单中抽取关键信息[一]----基于BiGRU+CR+预训练的词向量优化 2.快递单信息抽取[二]基于ERNIE1.0至ErnieGram + CRF预训练模型 3.快递单信息抽取[ ...

  2. 3.1 C++ STL 双向队列容器

    双向队列容器(Deque)是C++ STL中的一种数据结构,是一种双端队列,允许在容器的两端进行快速插入和删除操作,可以看作是一种动态数组的扩展,支持随机访问,同时提供了高效的在队列头尾插入和删除元素 ...

  3. 2000元内最超值游戏处理器!锐龙5 7500F首发评测:轻松超频5.6GHz游戏追平i5-13600K

    一.前言:首款不带核显的锐龙7000处理器 以往的桌面锐龙处理器,带核显型号的很少,而到了Zen4时代,此前已上市的锐龙7000系列处理器都集成了核显. 现在,AMD锐龙5 7500F来了,这是AMD ...

  4. 程序设计实验第一学期期末考试复习用源代码【C语言深度解剖】【超详细注释】

    有关此篇 在这里博主先告诉大家,博主在学校学的C语言课本是<谭浩强的C语言>那这本红色的书. 博主到期末阶段是学到了结构体那一章,下面是博主的复习代码,是一些比较有编程思想的一些源代码,博 ...

  5. (Python)每日代码||2024.1.17||函数中给列表形参默认值时,该默认列表在函数中的改变会保留下来

    def f(x,li=[1]): print(id(li)) li.append(x) print(li) f('a')#第一次调用函数 print() f('b')#第二次调用函数 print() ...

  6. Delphi 官方 MD5

    去官方文档搜就行了,引入System.Hash 单元: http://docwiki.embarcadero.com/Libraries/Athens/en/System.Hash.THashMD5 ...

  7. JS Leetcode 198. 打家劫舍 题解分析,再次感受动态规划的魅力

    壹 ❀ 引 本题来自LeetCode198. 打家劫舍,难度中等,也很有意思,是一道教小偷如何偷窃最大金额的题,题目描述如下: 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你 ...

  8. NC19429 红球进黑洞

    题目链接 题目 题目描述 在心理疏导室中有一种奇特的疏导工具,叫做红球.红球被提前分为了许多正方形小方格. 每当有人来找ATB做心理疏导时,ATB就会让他去先玩红球,然后通过红球小格方的高度来判断一个 ...

  9. Vuex和普通全局对象

    Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.每一个Vuex应用的核心就是 ...

  10. OpenCV开发笔记(六十六):红胖子8分钟带你总结形态学操作-膨胀、腐蚀、开运算、闭运算、梯度、顶帽、黑帽(图文并茂+浅显易懂+程序源码)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...