반응형
참고 :
https://www.tiny.cloud/docs/general-configuration-guide/upload-images/
위 사이트를 참고하여 Ajax 함수를 가져옴. XMLhttprequest.open을 routes/index.js에 있는 /tinymce 로 하여 거기서 클라우드에 업로드한다. 아래 코드는 클라이언트쪽에서 tineMCE 호출하는 것.
//views/tineMCE.pug
extends layout
block content
div(class="service__list")
textarea(id="editor" rows="2" class="form-control") welcome
input(name="image" type="file" id="upload" class="hidden" onchange="" style="display:none;")
script.
tinymce.init({
selector: '#editor',
plugins: [
'image',
],
height:800,
toolbar: 'link image', //undo redo | code |
image_title: true,
automatic_uploads: true,
image_uploadtab: true,
images_upload_handler: function (blobInfo, success, failure, progress) {
// 이미지 크기 제한두기
var image_size = blobInfo.blob().size / 1000; // image size in kbytes
var max_size = 3000 // max size in kbytes
if( image_size > max_size ){
failure('Image is too large( '+ image_size + ') ,Maximum image size is:' + max_size + ' kB');
return;
} else {
// Ajax
let xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/tinymce');
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100);
};
xhr.onload = function() {
var json;
if (xhr.status === 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
},
});
참고:https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/storage/storage-blob/samples/javascript
//routes/index.js
'use strict';
import express from 'express';
const router = express.Router();
import {
BlobServiceClient,
StorageSharedKeyCredential,
newPipeline
} from "@azure/storage-blob";
const sharedKeyCredential = new StorageSharedKeyCredential(account, accountkey);
const pipeline = newPipeline(sharedKeyCredential);
const pipeline = newPipeline(sharedKeyCredential);
import getStream from 'into-stream';
import multipart from 'connect-multiparty';
//나의 blob storage 정의
const blobServiceClient = new BlobServiceClient(
`https://${account}.blob.core.windows.net`,
pipeline
);
// 그냥 이름만드는
const getBlobName = originalName => {
const identifier = Math.random().toString().replace(/0\./, '');
return `${identifier}-${originalName}`;
};
//컨테이너 만들기
async function createContainer() {
//Create a container
const containerName = `newcontainer${new Date().getTime()}`;
const containerClient = blobServiceClient.getContainerClient(containerName);
const createContainerResponse = await containerClient.create();
console.log(`Create container ${containerName} successfully`, createContainerResponse.requestId);
}
// 컨테이너 리스트 보기.
async function getListTheContainers() {
let i = 1;
let result = [];
let containers = blobServiceClient.listContainers();
for await (const container of containers) {
console.log(`Container ${i++}: ${container.name}`);
result.push(containers.name)
}
return result
}
//컨테이너안에 blob리스트 보기
async function ListBlobsInsideContainer() {
const containerClient = blobServiceClient.getContainerClient(containerName);
let i = 1;
let blobs = containerClient.listBlobsFlat();
for await (const blob of blobs) {
console.log(`Blob ${i++}: ${blob.name}`);
}
}
//tinemce POST
router.post('/tinymce', async (req, res) => {
//위에서 만든 컨테이너 아무거나
let containerName2 = 'newcontainer1620926105771'
if (!req.files) {
return res.status(400).send('No files were uploaded.');
}
//blob이름 정해주고
const blobName = getBlobName(req.files.file.name);
const stream = getStream(req.files.file.data);
const containerClient = blobServiceClient.getContainerClient(containerName2);;
const listBlobsResponse = await containerClient.listBlobFlatSegment();
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
try {
await blockBlobClient.uploadStream(stream,
uploadOptions.bufferSize, uploadOptions.maxBuffers,
{ blobHTTPHeaders: { blobContentType: "image/jpeg" } });
//위의 Ajax함수에 location을 보냄.
res.send({
'location':`${listBlobsResponse.serviceEndpoint}${listBlobsResponse.containerName}/${blobName}`,
});
} catch (err) {
res.render('error', { message: err.message });
}
});
이렇게 해주고 돌리면 아래와 같이 된다.
그리고 클라우드에 잘 저장이 된 것을 확인할 수 있다.
반응형
'Framework > Node.js' 카테고리의 다른 글
Node / express / SQL Server / MS SQL database/Sequelize 사용 연결 / 로그인 / 회원가입 (0) | 2021.06.11 |
---|---|
Node.js - query INSERT INTO [table] (column) values 넣기 (0) | 2021.05.12 |
노드.제이에스 기본 내장 함수 Node.js Fundamental (0) | 2021.04.30 |