20210608 TIL
img[src]를 업로드한 image로 변경
const handleAvatarChange = (e) => {
// input[type='file']에서 받은 파일 데이터 받기.
const avatar = $("#input-avatar")[0].files[0];
// 서버에 전달할 form data. (여기선 중요하지 않음)
const formData = new FormData();
formData.append("user_img", avatar);
formData.append("user_id", window.location.href.split("/user/")[1]);
$.ajax({
type: "POST",
url: "/api/user/img",
data: formData,
cache: false,
contentType: false,
processData: false,
success: (res) => {
alert(res["msg"]);
// 서버로 데이터를 성공적으로 보내면, img 태그의 src를 변경.
$("#user-avatar").attr("src", URL.createObjectURL(avatar));
},
});
};
const init = () => {
// input[type='file']의 change event handling
$(".input-group").on("change", "#input-avatar", handleAvatarChange);
};
flask에서 이미지 파일 받아서 local에 저장하기
file = request.files["file_give"]
save_to = 'static/mypicture.jpg'
file.save(save_to)
FormData
key/value 구조의 form data를 쉽게 만들어 주는 class.
자주 사용하는 문법
const newForm = new FormData();
// key, value 추가
newForm.append('name', 'bob');
// key, value 삭제
newForm.delete('name');
// 해당 key가 있는지 확인
newForm.has('name');
// 순회하기
for(let data of newForm) {
const key = data[0];
const value = data[1];
}
hash 함수
임의의 길이의 값을 고정된 길이의 값으로 변환해주는 함수.
const handleAvatarChange = (e) => {
// input[type='file']에서 받은 파일 데이터 받기.
const avatar = $("#input-avatar")[0].files[0];
// 서버에 전달할 form data. (여기선 중요하지 않음)
const formData = new FormData();
formData.append("user_img", avatar);
formData.append("user_id", window.location.href.split("/user/")[1]);
$.ajax({
type: "POST",
url: "/api/user/img",
data: formData,
cache: false,
contentType: false,
processData: false,
success: (res) => {
alert(res["msg"]);
// 서버로 데이터를 성공적으로 보내면, img 태그의 src를 변경.
$("#user-avatar").attr("src", URL.createObjectURL(avatar));
},
});
};
const init = () => {
// input[type='file']의 change event handling
$(".input-group").on("change", "#input-avatar", handleAvatarChange);
};
file = request.files["file_give"]
save_to = 'static/mypicture.jpg'
file.save(save_to)
FormData
key/value 구조의 form data를 쉽게 만들어 주는 class.
자주 사용하는 문법
const newForm = new FormData();
// key, value 추가
newForm.append('name', 'bob');
// key, value 삭제
newForm.delete('name');
// 해당 key가 있는지 확인
newForm.has('name');
// 순회하기
for(let data of newForm) {
const key = data[0];
const value = data[1];
}
hash 함수
임의의 길이의 값을 고정된 길이의 값으로 변환해주는 함수.
key/value 구조의 form data를 쉽게 만들어 주는 class.
const newForm = new FormData();
// key, value 추가
newForm.append('name', 'bob');
// key, value 삭제
newForm.delete('name');
// 해당 key가 있는지 확인
newForm.has('name');
// 순회하기
for(let data of newForm) {
const key = data[0];
const value = data[1];
}
임의의 길이의 값을 고정된 길이의 값으로 변환해주는 함수.
hash의 특징으로 몇 가지가 있는데, 이러한 특징들 때문에 암호화에 사용될 수 있다.
- 해시 함수를 거친 출력값만으론 입력값을 유추할 수 없다.
(정확히는 불가능에 가깝다.) - 서로 다른 입력값으로 동일한 출력값을 만들 수 없다.
- 출력값으로 입력값을 복호화할 수 없다.
- 아무리 거대한 데이터라해도 일정한 길이로 출력되기 때문에, 거대한 데이터끼리의 무결성을 보장할 수 있다.
- 입력값의 아주 작은 변화로도 결과값이 전혀 다르게 도출된다.
출처: https://velog.io/@zuyonze/해시함수에-대한-개념-정리하기
해시 함수를 동작하게하는 알고리즘에도 여러 종류가 있는데, 제일 보편적인 알고리즘이 SHA256
이다.
import hashlib
password = 'hello'
hash_password = hashlib.sha256(password.encode('utf-8')).hexdigest()
python의 hashlib 내장 라이브러리를 이용해 쉽게 사용할 수 있다.
encoding()
: string data를 byte data로 encoding 해주는 메소드. sha256을 사용하려면 encoding을 해줘야한다.
(보통 암호화하는 알고리즘의 경우, 데이터를 byte 단위로 다루기 때문에 encoding 과정이 들어가는 거라 유추해볼 수 있다.)
hexdigest()
: 16진수로 구성된 string으로 변환해주는 메소드.
Author And Source
이 문제에 관하여(20210608 TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bandor/20210608-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)