[react]KakaoMap API-Polyline Jsonアップロード2
0、成果物
1.添付後保存
過去の方法で
xxx.json
ファイルをアップロードしても異常はありませんしかし、指定したフォルダにファイルを保存するのに問題が発生しました.ファイルを保存すると、サーバ側のDBリンクが切断されます.バックエンドサーバとフロントエンドサーバが
nodemon
にアップグレードされたことが確認されました.要するに、vailationという名前のステップをアップロードし、現在アップロードされているjsonファイルをサーバに保存しsaveに変更しました.
時間の差があっても意味がありません。サーバーを単独で駆動するだけで、よくできています。
2. Timeline.Save
サーバに格納されたjsonファイルのパスからファイルを読み出してjsonパケットを行う
ハッシュデータをmapに変換し、1つのハッシュごとに
timeline 데이터
を完了し、Timeline.save()
関数を用いて生成する102行目からfileパスを介してjsonデータにアクセスします.
103行目からファイルを読み込みます.このとき、ファイルストリームによって読み込まれます.readFileには2つのタイプがあります.
一般的に、読み取りファイルは非同期で処理され、カウントを受信して返すためにreadFileSync関数を使用して同期処理されます。
108行目から、jsonデータのキー値を1つずつグループ化し、
data
という変数を生成する.ここではそれぞれのビジネスモデルに沿って生成すればよい.dataが完了すると、line 167から
new Timeline(data)
により時間軸データが生成される.Line 174は、生成
calendar 데이터
のためにarrayを作成する.182行はlodashライブラリを用いて重複データ除去を行う.
ライン188は
calendar 데이터
を生成する異常がない場合は少数回答のみとなります.
#ちなみに201~206行では、完了日フォーマットの関数をmomentライブラリで削除します
3.ソース
polyline.js
const express = require('express');
const router = express.Router();
const multer = require('multer')
const fs = require('fs')
const moment = require("moment")
const { User } = require("../models/User")
const { Timeline } = require('../models/Timeline')
const { Calendar } = require('../models/Calendar')
const lodash = require('lodash');
//=================================
// Polyline
//=================================
router.post('/datas', (req, res) =>{
let userId = req.body.owner
let inputDate = req.query.date
//console.log('==> inputDate', inputDate)
Timeline.find({ owner: { $in: userId}, date: inputDate})
.exec((err, polylineInfo) => {
if(err) return res.status(400).json({success:false, err})
return res.status(200).json({
success:true,
polylineInfo:polylineInfo
})
})
})
router.post('/', (req, res) => {
console.log('=====', req.body)
return res.status(200).json({
success: true
})
})
/**
* https://www.a-mean-blog.com/ko/blog/%EB%8B%A8%ED%8E%B8%EA%B0%95%EC%A2%8C/_/Node-JS-Multer%EB%A1%9C-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C
*/
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`)
}
})
var upload = multer({ storage: storage }).array('file', 10)
router.post('/image', (req, res) => {
//가져온 이미지 저장
console.log('======================')
console.log(req.file)
upload(req, res, err => {
if(err){
return res.status(400).json({ success:false, err})
}
return res.status(200).json({
success:true,
files: req.files
})
})
})
var storageJson = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploadsjson')
},
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`)
}
})
var uploadJson = multer({ storage: storageJson }).array('file', 100)
router.post('/vaildation', (req, res) => {
uploadJson(req, res, err => {
//console.log('======================', req.files)
if(err){
return res.status(400).json({ success:false, err})
}
return res.status(200).json({
success:true,
files: req.files
})
})
})
router.post('/save', (req, res) => {
//console.log('>>> ', req.body)
let uploadCnt = 0
let calendarDate = []
req.body.filePath.map((file) => {
const readData = fs.readFileSync(file, 'utf8')
const data = JSON.parse(readData)
//console.log('data >> ', data.timelineObjects)
data.timelineObjects.map((cur, index) => {
let data = {
"owner":req.body.userId,
"image":[],
"title":"",
"description":"",
"useFlag":true,
"index":index
}
if(cur.activitySegment !== undefined){
let trackPoint = []
trackPoint.push({
"lat":cur.activitySegment.startLocation.latitudeE7/10000000,
"lng":cur.activitySegment.startLocation.longitudeE7/10000000})
cur.activitySegment.simplifiedRawPath &&
cur.activitySegment.simplifiedRawPath.points.map((pnt) => {
trackPoint.push({
"lat":pnt.latE7/10000000,
"lng":pnt.lngE7/10000000,
})
})
trackPoint.push({
"lat":cur.activitySegment.endLocation.latitudeE7/10000000,
"lng":cur.activitySegment.endLocation.longitudeE7/10000000})
data = {...data,
"date":calcDate(cur.activitySegment.duration.startTimestampMs),
"placeId":"",
"address":"",
"point":trackPoint,
"name":"",
"startTime":calcDateTime(cur.activitySegment.duration.startTimestampMs),
"endTime":calcDateTime(cur.activitySegment.duration.endTimestampMs),
"activityType":cur.activitySegment.activityType,
"visitType":"MOVE"
}
//console.log("=========activitySegment======\n", body)
} else {
let trackPoint = []
trackPoint.push({
"lat":cur.placeVisit.location.latitudeE7/10000000,
"lng":cur.placeVisit.location.longitudeE7/10000000})
data = {...data,
"date":calcDate(cur.placeVisit.duration.startTimestampMs),
"placeId":cur.placeVisit.location.placeId,
"address":cur.placeVisit.location.address,
"point":trackPoint,
"name":cur.placeVisit.location.name,
"startTime":calcDateTime(cur.placeVisit.duration.startTimestampMs),
"endTime":calcDateTime(cur.placeVisit.duration.endTimestampMs),
"activityType":"",
"visitType":"STAY"
}
}
const timeline = new Timeline(data)
timeline.save((err) => {
if (err) return res.status(400).json({ success: false, err })
})
uploadCnt += 1
calendarDate.push({
"date":data.date,
"useFlag":"Y"
})
})
})
calendarDate = lodash.uniqBy(calendarDate, 'date')
const calendarBody = {
"owner":req.body.userId,
"date":calendarDate
}
const calendar = new Calendar(calendarBody)
calendar.save((err) => {
if (err) return res.status(400).json({ success: false, err })
})
return res.status(200).json({
success:true,
successCnt: uploadCnt
})
})
const calcDate = (timestamp) => {
return moment(Number(timestamp)).format('YYYY-MM-DD')
}
const calcDateTime = (timestamp) => {
return moment(Number(timestamp)).format('YYYY-MM-DD HH:MM:DD')
}
module.exports = router;
Reference
この問題について([react]KakaoMap API-Polyline Jsonアップロード2), 我々は、より多くの情報をここで見つけました https://velog.io/@upisdown/React-카카오-Map-API-Polyline-Json-업로드-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol