Tinymce富文本框图片上传

第一种方式

前端初始化富文本框时调用后端接口

let init = ref({
            //图片上传
            images_upload_handler:'api/upload_image',
})

后端node

router.post('/upload_image',upload.single('file'),async(req,res,next)=>{
    console.log('上传文件');
    console.log(req.file);
    const file = req.file
    const fileName = `${Date.now()}-${file.filename}.${file.originalname.slice(file.originalname.lastIndexOf('.') + 1)}`
    const uploadFile = fs.createWriteStream(`./public/images/uploads/${fileName}`,{
        highWaterMark:1024*1024*50
    })
    req.socket.setTimeout(120000)
    req.setTimeout(120000)
    const fileStream = fs.createReadStream(file.path)
    let uploadComplete = false  
    fileStream.on('error', err => {
        uploadFile.close()
    })  
    fileStream.pipe(uploadFile).on('finish', () => {
        uploadComplete = true
        uploadFile.close()  
    })
    res.json({ 
        location: `http://localhost:8886/images/uploads/${fileName}` 
    })
})

第二种 自定义方式

前端

let init = ref({
            //自定义图片上传
            images_upload_handler:(blobInfo,success,failure)=>{
                console.log('自定义图片上传');
                // console.log(blobInfo);
                // console.log(failure);
                // console.log(success);
                const blob = blobInfo.blob()

                //组装图片信息
                const param = new FormData()
                param.append('file',blob,blobInfo.fileName)

                // 调用上传图片接口
                axios.post('api/upload_image',param,{
                'Content-type' : 'multipart/form-data'
            }).then((res)=>{
                success(res.data.location)
            })
})

后端node同上