图片上传

简单的图片上传

前端

1
<input type="file" id="file">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function upload() {
var formData = new FormData();
var fileField = document.querySelector("#file");
const file = fileField.files[0];
formData.append('inputFile', file);
fetch('/upload', {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(res => {
document.querySelector("#url").value = res.url
});
}

服务端使用express的一个插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const upload = require('multer')();
const router = require('express').Router();

router.post('/upload', upload.fields([{ name: 'inputFile' }]), async (req, res) => {
//文件
const file = req.files['inputFile'][0];
const md5Name = crypto
.createHash('md5')
.update(file.buffer, 'utf-8')
.digest('hex');//计算出上传文件的md5,当文件名
const extname = path.extname(file.originalname)//后缀名
// 存储到cos的路径
const Key = '/upload/' + md5Name + extnam

try {
// 利用自己封装的腾讯oss 上传模块
const { url } = await oss.upload({
Key: Key,
Body: file.buffer
});
res.send({
code: 200,
data: file.originalname,
url
})

} catch (error) {
res.send({ code: 500, msg: error })
}
});

最后部署到腾讯云 serveless上,没啥问题直到上传的文件超过6M
查阅文档,提交工单,得到的说法都是网关会拦超过6M的请求体

没办法,分片上传

分片上传

思路

  1. 前端切片,按顺序打上标签,然后分别上传到后端,后端存储到临时文件夹
  2. 前端发送上传完成的请求,后端将切片的文件合并
  3. 删除临时文件

前端

html没有区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const bytesPerPiece = 4 * 1024 * 1024; // 每个文件切片大小定为5MB .

function upload() {
var formData = new FormData();
var fileField = document.querySelector("#file");
const file = fileField.files[0];
const { size } = file;
// 大于5M,分片上传
if (size > bytesPerPiece) {
chunkUpload(file)
} else {

formData.append('inputFile', file);

fetch('/upload', {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(res => {
document.querySelector("#url").value = res.url
});
}
}
// 切割并分片上传
async function chunkUpload(file) {
const { size, name, type } = file;
// 分片上传
let index = 0;
const totalPieces = Math.ceil(size / bytesPerPiece);
console.time('上传完成')

while (index < totalPieces) {
const start = index * bytesPerPiece;
let end = start + bytesPerPiece;
if (end > size) {
end = size
}
const chunk = file.slice(start, end);//切割文件
const sliceIndex = `${name}.${index}`;
const formData = new FormData();

formData.append("chunk", chunk)
formData.append("fileName", name)
formData.append("chunkName", sliceIndex);

console.log(formData)

await fetch('/uploadChunk', {
method: 'POST',
body: formData,
});
index++
}

console.timeEnd('上传完成')
console.log('上传完成')

fetch('/joinChunk', {
method: 'post',
headers: {
'Content-Type': "application/json;charset=UTF-8"
},
body: JSON.stringify({ 'fileName': name })
})
.then(res => res.json())
.then(res => {
document.querySelector("#url").value = res.url
})

}

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
router.post('/uploadChunk', upload.fields([{ name: 'chunk' }]), async (req, res) => {
const file = req.files['chunk'][0];//文件名
const buffer = file.buffer;
const { chunkName, fileName } = req.body;

const chunkPath = join(__dirname, `../temp/chunk/${fileName}`, chunkName)
const filePath = join(__dirname, `../temp/chunk/${fileName}`)

if (!fs.existsSync(filePath)) {
fs.mkdirSync(filePath);
}

fs.writeFileSync(chunkPath, buffer);

res.send({
code: 200,
data: filePath,
msg: `${chunkName}上传成功`
})
});

router.post('/joinChunk', async (req, res) => {
const { fileName } = req.body;
console.log(req.body)
const dir = join(__dirname, `../temp/chunk/${fileName}`)
const file = join(__dirname, `../temp/file/${fileName}`)
const files = fs.readdirSync(dir);

files
.sort((a, b) => {
const aNum = Number(a.split('.').pop())
const bNum = Number(b.split('.').pop());
return aNum > bNum ? 1 : -1
});

files.forEach(chunkName => {
const chunkUrl = join(dir, chunkName)
const buffer = fs.readFileSync(chunkUrl);

fs.appendFileSync(file, buffer)
fs.unlinkSync(chunkUrl)

});

fs.rmdirSync(dir);
const fullFile = fs.readFileSync(file)

const md5Name = crypto.createHash('md5').update(fullFile, 'utf-8').digest('hex');//计算出上传文件的md5,当做文件名
const extname = path.extname(file);//后缀名
const Key = '/upload/' + md5Name + extname// 存储到cos的路径
console.log(Key)
try {
const { url } = await oss.upload({
Key: Key,
Body: fullFile
});
res.send({
code: 200,
data: fileName,
url
})

} catch (error) {
res.send({ code: 500, msg: error })
} finally {
fs.unlinkSync(file)
}
})

本地测试毫无问题,上传到serveless,结果您猜怎么着?

反复研究了文档,烦了n多次客服之后,确定网关的6MB大小小智是base64之后要小于这个值
二进制传输的Binary和content-length不是,base64之后的大小菜市
得出以下几种解决方案

  1. 将碎片文件直接存到cos里面,再读取cos里面的碎片合并到cos
    优点:cos和scf在同一区域,传输流量免费
    缺点:碎片受到网关请求体大小限制

  2. 利用sfc的临时文件目录可以读写,将碎片合并到临时目录,上传到cos
    有点:只传输一次到cos
    缺点:碎片受到网关请求体大小限制

  3. 前端直接用cdk传到cos
    优点:不走网关,没有大小限制
    缺点:md5、鉴权都要放到前端

综合考虑,准备放弃走网关了,直接前端上传

api服务就是应该提供一些鉴权,功能

相关文章
评论
分享
  • 利用ffmpeg转码B站缓存

    由于工作原因驻场开发,地区限制,酒店竟没有wifi,所以开了流量套餐 其中就包括B站在线观看,缓存视频单独走流量计算,每个月有30G的流量, 虽然可以愉快的手机刷B站,但是明显PC看视频才更爽, 且开热点给PC看B站的流量是不算在...

    利用ffmpeg转码B站缓存
  • 服务器挂机下载百度网盘

    非业务需求,只是觉得开着电脑挂机下载百度网盘的内容实在是太慢了突发奇想,能不能用服务器挂机下载,反正开着也是开着上网搜索一番,还真的有现成的实现 有人利用百度网盘开源的api,写了个下载上传同步的工具(https://github.c...

    服务器挂机下载百度网盘
  • serveless踩坑-同步机制

    没有真正的异步 12345678910router.get('/track', async (req, res) => { track( ...req.query ); res.type('image/png')....

    serveless踩坑-同步机制
  • 离线上传方案

    有个需求需要断网环境下上传文件,在有网环境下提交附件需要提交到单独的文件服务器,返回文件服务器的id框架是element-ui 设计思路 利用浏览器自带的indexDB,存储blob数据 利用localStorage缓存表单数据,in...

    离线上传方案
  • react-native开发指南

    React Native 中设置 APP 名称、图标和启动页https://www.jianshu.com/p/727c6057fc0a 设置项目名android/app/src/main/res/values/strings.xml...

    react-native开发指南
  • 纯css添加div

    今天接到一个需求,在贴片图片的左下角添加一段文字,表明“广告”二字乍一听挺简单的,后来拿到源码发现不对劲 1234<script type='text/javascript' charset='utf-8' src='http:...

    纯css添加div
  • 82.删除排序链表中的重复元素II

    82. 删除排序链表中的重复元素 II给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字。示例1输入: 1->2->3->3->4->4->5输出: 1->2...

    82.删除排序链表中的重复元素II
  • hexo使用手册

    My Name is NNNNzs 文章Front-matter是文件最上方以 — 分隔的区域,用于指定个别文件的变量,举例来说: 12345678---title: hexo使用手册date: 2019-08-10 00:25:19...

    hexo使用手册
  • 吾爱吾师,吾更爱真理

    前天是教师节,一直记得自己曾在酒桌上吹过的牛逼 当年是葛晨的散伙饭,劝龙哥喝酒找不到啥切入点,我就以师徒关系敬酒结果龙哥枪口对准了我开始教育从优势到劣势,从事业到感情,从技术到格局字字诛心,刀刀见血点破了我这大专人入职四线城市这不入流...

    吾爱吾师,吾更爱真理
  • 隔离小结

    背景时长两个月出差暂歇,在公司上班刚刚好一个星期,疫情就彻底爆发了从禄口机场扩散出来的人遍布全南京而这次我住的小区,竟一次性爆发了三个阳性患者没想到这次竟有21天之久 生活起居与前年过年居家隔离不同,这次是蜗居在10平米不到...

    隔离小结