Request failed with status code 413 AxiosError: Request failed with status code 413 请求体过大报错

 

 在写一个富文本框 内容上传时 由于上传的文件 比如图片文件太大导致发请求的时候 报错413AxiosError: Request failed with status code 请求体过大 

这里为了解决这个问题 选择了

分段上传

具体思路如下

前端 这里的html为我富文本框内获取的内容 

注意这里一定要等上一个请求完成 再执行下一个 不然这里会出现 断点问题

const splitIntoChunks = (content, size) => {
            let chunks = []
            while (content.length > size) {
                chunks.push(content.slice(0, size))
                content = content.slice(size)
            }
            chunks.push(content)
            return chunks
        }

const submitHtml = async () => {
            console.log(tinymceText.value);
            //获取html文本
            const html = tinymceText.value
            console.log(tinymceText.value.length);
            //将notice切片 每片50kb
            let chunks = splitIntoChunks(html, 1024 * 50)
            
            let uploaded = 0 //已上传片数
            const sendChunk = () => {
                let chunk = chunks[uploaded]
                axios({
                    method: 'post',
                    url: '/api/addNotice',
                    data: {
                        chunk, //当前分片数据
                        chunks: chunks.length, //总分片数
                        index: uploaded, //当前分片索引
                        titleVal: titleVal.value,
                        authorVal: authorVal.value,
                        typeVal: typeVal.value
                    },
                }).then((res) => {
                    uploaded++
                    if (uploaded < chunks.length) {
                        sendChunk()
                        console.log(res.data);
                    } else {
                        console.log('完成');
                        console.log(res.data);
                    }
                })
            }
            sendChunk()
        }

解决断点问题 这里要做一个判断

 然后再看node 后端的代码

//添加公告
    let markdown = ''
    async addNotice(req,res){
        console.log('添加广告');
            //获取当前分片和分片总数
            let {chunk,chunks,index} = req.body
            //将分片追加到markdown
            markdown +=chunk
            if(index==chunks - 1){
                let { titleVal,authorVal,typeVal} = req.body
                console.log(titleVal,authorVal,typeVal);
                console.log(markdown.length);
                dbpool.connect('INSERT INTO notice VALUES(null,?,?,null,?,?)',[titleVal,typeVal,authorVal,markdown],(err,data)=>{
                        if(!err){
                            res.send('success')
                            markdown = ''
                        }else{
                            res.send('failure')
                        }
                    })
            }else{
                res.send('未完成')
            }
    },

这里有个坑  node后端拿到数据库后 数据库并没有存储完整的 数据

原因 这里我的字符类型使用的text 改成mediumtext就可以了

• MySQL:- TEXT类型最大存储长度为65535个字符(64KB)
•  MEDIUMTEXT类型最大存储长度为16777215个字符(16MB)
•  LONGTEXT类型最大存储长度为4294967295个字符(4GB)

 

最终结果 点击上传

小程序端拿到的结果