• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

이미지 업로드와 관련하여 코드 변경해도 되는지

24.01.23 14:00 작성 조회수 142

0

안녕하세요 선생님


이미지 업로드와 관련한 질문 사항인데요, 도메인 연결 후 이미지 업로드시 이미지가 화면에 안뜨고, 서버에서 아래와 같은 타입 에러가 발생해서 에러 원인을 검색해보았는데, 버전을 2에서 3으로 업그레이드 한 뒤 코드를 수정한 뒤 이미지는 화면에 떴는데, 게시글이 안올라가서 보니까 이미지 Url길이가 너무 길어서 발생한 문제인것 같아서 image테이블에 src컬럼 길이 1000으로 변경하니까 에러가 해결되긴 했는데, 이렇게 변경해도 될까욧?

백엔드 에러로그)

0|app      | Please migrate your code to use AWS SDK for JavaScript (v3).
0|app      | For more information, check the migration guide at https://a.co/7PzMCcy
0|app      | (Use `node --trace-warnings ...` to show where the warning was created)
0|app      | TypeError: this.client.send is not a function
0|app      |     at _Upload.__uploadUsingPut (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:217:53)
0|app      |     at _Upload.__doConcurrentUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:280:29)
0|app      |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
0|app      |     at async Promise.all (index 0)
0|app      |     at async _Upload.__doMultipartUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:366:5)
0|app      |     at async _Upload.done (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:190:12)문의1)


back/package.json 버전 => aws-sdk 2버전에서 aws-sdk/client-s3 3버전으로 업그레이드

{
  "name": "react-nodebird-back",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=production pm2 start app.js"
  },
  "author": "luckyhaejin",
  "license": "ISC",
  "dependencies": {
    "@aws-sdk/client-s3": "^3.496.0",
    "aws-sdk": "^2.1538.0",
    "bcrypt": "^5.1.1",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "helmet": "^7.1.0",
    "hpp": "^0.2.3",
    "morgan": "^1.10.0",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "mysql2": "^3.6.5",
    "passport": "^0.7.0",
    "passport-local": "^1.0.0",
    "pm2": "^5.3.0",
    "sequelize": "^6.35.2",
    "sequelize-cli": "^6.6.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}


수정한 후 post.js 이미지 관련 코드

const express = require('express');
const {Post, Image, Comment, User, Hashtag} = require('../models');
const {isLoggedIn} = require('./middlewares');
const router = express.Router();
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const multerS3 = require('multer-s3');
// const AWS = require('aws-sdk');
try {
    fs.accessSync('uploads');
} catch(error) {
    console.error('uploads폴더가 없으므로 생성합니다.');
    fs.mkdirSync('uploads'); 
}
// AWS.config.update({
//     accessKeyId: process.env.S3_ACCESS_KEY_ID,
//     secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
//     region: 'ap-northeast-2',
// });
const { S3Client } = require('@aws-sdk/client-s3');
const s3Client = new S3Client({
    credentials: {
        accessKeyId: process.env.S3_ACCESS_KEY_ID,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
    region: 'ap-northeast-2',
});

const upload = multer({
    storage: multerS3({
        // s3: new AWS.S3(),
        s3: s3Client,
        bucket: 'react-saga-nodebird-s3',
        key(req, file, cb){
            cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`)
        }
    }),
    limits: {fileSize: 20 * 1024 * 1024} //20MB
}); 
router.post('/images', isLoggedIn, upload.array('image'),(req, res, next) => { //POST /post/images
    res.json(req.files.map((v) => v.location));
});

 
게시글 업로드시 에러 로그)

Error
0|app      |     at Query.run (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25)
0|app      |     at /home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/sequelize.js:315:28
0|app      |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
0|app      |     at async MySQLQueryInterface.insert (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:308:21)
0|app      |     at async Image.save (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:2490:35)
0|app      |     at async Image.create (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:1362:12)
0|app      |     at async /home/ubuntu/react_nodebird/back/routes/post.js:60:31 {
0|app      |   name: 'SequelizeDatabaseError',
0|app      |   parent: Error: Data too long for column 'src' at row 1
0|app      |       at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17)
0|app      |       at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26)
0|app      |       at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34)
0|app      |       at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12)
0|app      |       at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16)
0|app      |       at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25)
0|app      |       at Socket.emit (node:events:518:28)
0|app      |       at addChunk (node:internal/streams/readable:559:12)
0|app      |       at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
0|app      |       at Readable.push (node:internal/streams/readable:390:5) {
0|app      |     code: 'ER_DATA_TOO_LONG',
0|app      |     errno: 1406,
0|app      |     sqlState: '22001',
0|app      |     sqlMessage: "Data too long for column 'src' at row 1",
0|app      |     sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);',
0|app      |     parameters: [
0|app      |       'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png',
0|app      |       '2024-01-23 04:33:31',
0|app      |       '2024-01-23 04:33:31'
0|app      |     ]
0|app      |   },
0|app      |   original: Error: Data too long for column 'src' at row 1
0|app      |       at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17)
0|app      |       at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26)
0|app      |       at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34)
0|app      |       at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12)
0|app      |       at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16)
0|app      |       at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25)
0|app      |       at Socket.emit (node:events:518:28)
0|app      |       at addChunk (node:internal/streams/readable:559:12)
0|app      |       at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
0|app      |       at Readable.push (node:internal/streams/readable:390:5) {
0|app      |     code: 'ER_DATA_TOO_LONG',
0|app      |     errno: 1406,
0|app      |     sqlState: '22001',
0|app      |     sqlMessage: "Data too long for column 'src' at row 1",
0|app      |     sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);',
0|app      |     parameters: [
0|app      |       'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png',
0|app      |       '2024-01-23 04:33:31',
0|app      |       '2024-01-23 04:33:31'
0|app      |     ]
0|app      |   },
0|app      |   sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);',
0|app      |   parameters: [
0|app      |     'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png',
0|app      |     '2024-01-23 04:33:31',
0|app      |     '2024-01-23 04:33:31'
0|app      |   ]
0|app      | }

models/image -> src컬럼 길이 200에서 1000으로 변경 

const DataTypes = require('sequelize');
const {Model} = DataTypes;

module.exports = class Image extends Model {
    static init(sequelize) {
        return super.init({
            //id가 기본적으로 들어있다
            src: {
                type:DataTypes.STRING(1000),
                allowNull:false
            },
        },{
            modelName: 'Image',
            tableName: 'images',
            charset: 'utf8',
            collate: 'utf8_general_ci',
            sequelize
        });
    }
    static associate(db) {
        db.Image.belongsTo(db.Post);
    }
}

 스크린샷 2024-01-23 오후 1.59.23.png

course-thumbnail

[리뉴얼] React로 NodeBird SNS 만들기

S3 연결하기

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

조현영님의 프로필

조현영

지식공유자

2024.01.23

네 문제없습니다!

0

박해진님의 프로필

박해진

질문자

2024.01.23

감사합니닷!

이 글과 비슷한 Q&A