03. Node.js 서버에 연동하여 Image Upload 및 Download하기

Node.js 웹서버와 연동하여 Image를 Upload하고 Download하는 것을 만들었다.

Upload는 POST 방식으로, Download는 Unity의 UnityWebRequestTexture.GetTexture()를 이용하여 만들었다.

찾아봐도 정보가 별로없고, 제대로 생각을 못해서 그런지 좀 버벅였다.

그래도 열심히 찾아봐서 도움이 많이된 것 같다.

추후에 다시 연습해봐야겠다.

Server

const express = require('express');
const mysql = require('mysql');
const multer = require('multer');
const fs = require('fs');
const app = express();
var router = express.Router();
module.exports = router;
 
app.use(express.json());
console.log(__dirname + '/uploads');
app.use(express.static(__dirname + '/uploads'));
 
app.listen(3005, () =>
{
    console.log("서버시작, 3005번 포트");
});
 
let storage = multer.diskStorage({
    destination: function(req, file, callback){
        callback(null, "uploads/");
    },
    filename: function(req, file, callback){
        callback(null, file.originalname);
    }
});
 
let upload = multer({
    storage: storage
});
 
app.post('/api/uploadimage', upload.single("imgfile"), (req, res, next) =>
{
    let file = req.file;
 
    console.log("접속함");
 
    res.json({
        success: true,
        imageurl: `http://127.0.0.1:3005/uploads/'${req.filename}'`
    });
});

Client

using System.IO;
using System.Text;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Networking;
using Newtonsoft.Json;
 
public class packet
{
    public int errorno;
}
 
public class req_uploadimage
{
    public string name;
}
 
public class res_uploadimage : packet
{
    public bool success;
}
 
public class req_getimage
{
    public string url;
}
 
public class res_getimage : packet
{
    public string imagename;
}
 
public class App : MonoBehaviour
{
    public Sprite sampleImage;
    public Button btnUploadImage;
    public Button btnDownloadImage;
    public Image image;
 
    private string serverPath = "http://127.0.0.1:3005";
    private void Start()
    {
        this.SetBtnsEvent();
    }
 
    private void SetBtnsEvent()
    {
        this.btnUploadImage.onClick.AddListener(() =>
        {
            var reqUploadImage = new req_uploadimage();
            this.sampleImage.name = "imgfile";
            reqUploadImage.name = "imgfile";
            var json = JsonConvert.SerializeObject(reqUploadImage);
 
            StartCoroutine(this.Upload(json, (result) =>
            {
                var responseResult = JsonConvert.DeserializeObject<res_uploadimage>(result);
                Debug.Log("성공여부 : " + responseResult.success);
            }));
        });
 
        this.btnDownloadImage.onClick.AddListener(() =>
        {
            StartCoroutine(this.GetImage("sampleimage.png", (result) =>
            {
                var tex2D = (Texture2D)result;
                var rect = new Rect(0, 0, tex2D.width, tex2D.height);
                this.image.sprite = Sprite.Create(tex2D, rect, new Vector2(0.5f, 0.5f));
 
            }));
        });
    }
 
    private IEnumerator GetImage(string imagename, System.Action<Texture> OnCompleteDownload)
    {
        var path = string.Format("{0}/{1}", this.serverPath, imagename);
        UnityWebRequest webRequest = UnityWebRequestTexture.GetTexture(path);
        yield return webRequest.SendWebRequest();
 
        if (webRequest.isNetworkError || webRequest.isHttpError)
        {
            Debug.Log(webRequest.error);
        }
        else
        {
            OnCompleteDownload(((DownloadHandlerTexture)webRequest.downloadHandler).texture);
        }
    }
 
    private IEnumerator Upload(string data, System.Action<string> OnCompleteUpload)
    {
        //이미지 sprite -> texture2d로 변환후 png로 변환
        var img = this.sampleImage;
        var newTex = new Texture2D((int)img.rect.width, (int)img.rect.height);
        var newColors = img.texture.GetPixels((int)img.textureRect.x, (int)img.textureRect.y, (int)img.textureRect.width, (int)img.textureRect.height);
        newTex.SetPixels(newColors);
        newTex.Apply();
        var tex = ImageConversion.EncodeToPNG(newTex);
 
        var byteArr = Encoding.UTF8.GetBytes(data);
        List<IMultipartFormSection> formData = new List<IMultipartFormSection>();
        formData.Add(new MultipartFormFileSection("imgfile", tex, "sampleimage.png", "image/png"));
 
        var path = string.Format("{0}/{1}", this.serverPath, "api/uploadimage");
        UnityWebRequest webRequest = UnityWebRequest.Post(path, formData);
        webRequest.downloadHandler = new DownloadHandlerBuffer();
        yield return webRequest.SendWebRequest();
 
        var result = webRequest.downloadHandler.text;
        OnCompleteUpload(result);
    }
}