base64 转文件上传
// 将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 转文件上传的更多相关文章
- Base64文件上传(Use C#)
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,它是一种基于64个可打印字符来表示二进制数据的方法. 使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格 ...
- .netcore 文件上传转为base64位字符串
.netcore文件上传Api接口,和正常的webForm提交类似,只是用postman测试接口时,记得给form表单命名,否则获取上传文件数量一直为0 后端代码 using System; usin ...
- vue + element 文件上传 并将文件转 base64
当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...
- 文件上传 和 base64编码
base64编码 1.关于Base64编码 : https://www.cnblogs.com/liyiwen/p/3814968.html (个人猜测),file表单发送文件,肯定是将文件转换为 ...
- 文件上传三:base64编码上传
介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 优点: 1.浏览器可以马上展示图像,不需要先上 ...
- 前端element ui 文件base64加密字符串 上传
<el-form-item label="附件" prop="attachment"> <el-upload :multiple=" ...
- chunkupload文件上传断点续传组件(java)
chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. 从整体上讲,chunkupload会对文件进行切片处理,每个切片 ...
- chunkupload 文件上传断点续传组件(java) - 正式发布
chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: · 实现断点续传 · ...
- Selenium2学习-039-WebUI自动化实战实例-文件上传下载
通常在 WebUI 自动化测试过程中必然会涉及到文件上传的自动化测试需求,而开发在进行相应的技术实现是不同的,粗略可划分为两类:input标签类(类型为file)和非input标签类(例如:div.a ...
- SpringMVC 文件上传&拦截器&异常处理
文件上传 Spring MVC 为文件上传提供了直接的支持,这种支持是通过即插即用的 MultipartResolver 实现的.Spring 用 Jakarta Commons FileUpload ...
随机推荐
- 【一】AI Studio 项目详解【(一)VisualDL工具、环境使用说明、脚本任务、图形化任务、在线部署及预测】PARL
相关文章 [一]-环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简介 [五]-Sarsa&Qlear ...
- python list 转二叉树 及遍历
from __future__ import annotations from typing import Union from collections import deque class Tree ...
- 从嘉手札<2023-11-20>
写给十年如一日的偶像--Faker "我看了一下,觉得视频还不够清晰,等我换一个清晰点的摄像头再回来直播,不要走开~" 繁星满天,流光飞逝. 世界是一场盛大的表演, 舞台上熙熙攘攘 ...
- 4599元 铭凡推出NAG6迷你主机:12代i9+RX 6600M
铭凡推出了新款迷你主机NAG6,首发价4599元. 据了解,新款迷你主机的处理器采用的是i9-12900H,14核心20线程.24MBL3缓存,最高睿频达5.0GHz. 不仅如此,新款迷你主机内置RX ...
- 零基础入门学习Java课堂笔记 ——day04
Java数组 1.数组概述 定义:数组是相同类型的有序集合,同一组同一类型的数据可以按照先后次序排列组合在一起,其中一个数据可以称为元素,每个数组元素可以通过一个下表访问它们 2.数组声明创建 dat ...
- .NET 云原生架构师训练营(模块二 基础巩固 Host)--学习笔记
2.2.4 核心模块--Host 什么是 Host Host 的默认配置做了哪些事情 框架提供的服务 HostedService 后台服务 ASP.NET Core Web 主机:https://do ...
- Visual Studio部署matplotlib绘图库的C++版本
本文介绍在Visual Studio软件中配置.编译C++环境下matplotlibcpp库的详细方法. matplotlibcpp库是一个C++环境下的绘图工具,其通过调用Python接口, ...
- low-code 低代码平台 java 代码自动一键生成工具
low-code low-code 是一款为 java 打造的低代码平台. 开源地址:https://github.com/houbb/low-code 特性 支持基本的增删改查 支持枚举值处理 支持 ...
- 【Unity3D】UGUI之布局组件
1 概述 布局组件主要有:水平布局(HorizontalLayoutGroup).垂直布局(VerticalLayoutGroup).网格布局(GridLayoutGroup),用于约束子控件的布 ...
- 基于keras的胶囊网络(CapsNet)
1 简介 胶囊网络(CapsNet)由 Hinton 于2017年10月在<Dynamic Routing Between Capsules>中提出,目的在于解决 CNN 只能提取特征,而 ...