json 오브젝트에 이미지 파일을 삽입하려면 어떻게 해야 합니까?
게임 이름, 장르, 이미지 등이 포함된 비디오 게임 데이터베이스를 만들고 있습니다.db의 json 오브젝트에 이미지를 넣을 수 있습니까?그렇지 않다면 이 문제를 해결할 방법이 있을까요?
두 가지 방법으로 생각할 수 있습니다.
1.
파일 시스템에 임의의 디렉토리의 파일 저장(예:dir1(타임스탬프일 수 있음) 및 파일 이름을 변경합니다(예:xyz123.jpg） 。이름을 일부 DataBase에 저장합니다.그런 다음 JSON을 생성할 때 이 파일 이름을 가져와 완전한 URL을 생성합니다.http://example.com/dir1/xyz123.png를 JSON에 삽입합니다.
2.
Base 64 Encoding, 기본적으로 임의의 이진 데이터를 ASCII 텍스트로 인코딩하는 방법입니다.데이터 3바이트당 4글자가 필요하며 마지막에 약간의 패딩이 필요할 수 있습니다.기본적으로 입력의 각 6비트는 64자 알파벳으로 부호화됩니다."표준" 알파벳은 A-Z, a-z, 0-9 및 + 및 /를 사용하며 =를 패딩 문자로 사용합니다.URL에 안전한 변종이 있습니다.따라서 이 접근법에서는 이미지를 저장하면서 MongoDB에 직접 저장할 수 있습니다.이미지를 인코딩하고 가져오는 동안 디코딩할 수 있습니다.이 방법에는 다음과 같은 몇 가지 단점이 있습니다.
- base64 인코딩은 원래 바이너리 표현보다 파일 크기를 약 33% 크게 합니다.즉, 더 많은 데이터가 전송되고 있음을 의미합니다(모바일 네트워크에서는 특히 문제가 될 수 있습니다).
- IE6 또는 IE7에서는 데이터 URI는 지원되지 않습니다.
- base64 인코딩된 데이터는 바이너리 데이터보다 처리 시간이 더 걸릴 수 있습니다.
이미지 데이터 URI로의 변환
A.) 캔버스
이미지를 이미지 객체에 로드하고 캔버스에 그린 다음 캔버스를 데이터로 변환합니다.URL 입니다.
function convertToDataURLviaCanvas(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
사용.
convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
지원되는 입력 형식 image/png,image/jpeg,image/jpg,image/gif,image/bmp,image/tiff,image/x-icon,image/svg+xml,image/webp,image/xxx
B.) FileReader
XMLHttpRequest를 통해 이미지를 blob으로 로드하고 FileReader API를 사용하여 데이터 URL로 변환합니다.
function convertFileToBase64viaFileReader(url, callback){
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
이 어프로치
- 브라우저 지원 부족
- 압축 성능이 향상되었습니다.
- 다른 파일 형식에서도 사용할 수 있습니다.
사용.
convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
JSON 형식에는 다음 유형의 값만 포함할 수 있습니다.
- 스트링
- 번호
- 물건
- 배열
- 진실의
- 거짓의
- 무효
이미지는 "바이너리" 유형으로, 이러한 유형은 아닙니다.따라서 이미지를 JSON에 직접 삽입할 수 없습니다.이미지를 텍스트 표현으로 변환하여 일반 문자열로 사용할 수 있습니다.
이를 실현하는 가장 일반적인 방법은 base64라고 불리는 것입니다.기본적으로 다음과 같이 인코딩하는 대신1 ★★★★★★★★★★★★★★★★★」0s는 64글자의 범위를 사용하여 텍스트 표현을 보다 간결하게 합니다. 예를 는 '64'는 '64'는 '64'로 됩니다.1000000에서는 Base64는 Base64는 1자만 쓸 수 있어요.=.
브라우저에서 이미지를 인코딩할지 여부에 따라 base64에서 인코딩하는 방법은 여러 가지가 있습니다.
웹 애플리케이션을 개발하는 경우 이미지를 바이너리 형식으로 별도로 저장하고 해당 이미지의 경로를 JSON 등에 저장하는 것이 훨씬 효율적입니다.클라이언트의 브라우저가 이미지를 캐시할 수도 있습니다.
데이터 URL 스킴 사용:https://en.wikipedia.org/wiki/Data_URI_scheme
이 문자열은 html에서 합니다.html은 html입니다.<img src="data:image/png;base64,iVBOR....">
Mongo DB에 직접 파일을 업로드하려면 Grid FS를 사용할 수 있습니다.파일 시스템 내 어디에든 파일을 업로드하고 모든 엔트리에 대해 이미지의 URL을 JSON 오브젝트에 넣은 후 특정 오브젝트의 데이터를 호출할 때 URL을 사용하여 이미지를 호출할 수 있습니다.
사용하고 있는 백엔드 테크놀로지를 가르쳐 주세요.저는 그것을 바탕으로 더 많은 제안을 할 수 있습니다.
public class UploadToServer extends Activity {
TextView messageText;
Button uploadButton;
int serverResponseCode = 0;
ProgressDialog dialog = null;
String upLoadServerUri = null;
/********** File Path *************/
final String uploadFilePath = "/mnt/sdcard/";
final String uploadFileName = "Quotes.jpg";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_upload_to_server);
uploadButton = (Button) findViewById(R.id.uploadButton);
messageText = (TextView) findViewById(R.id.messageText);
messageText.setText("Uploading file path :- '/mnt/sdcard/"
+ uploadFileName + "'");
/************* Php script path ****************/
upLoadServerUri = "http://192.1.1.11/hhhh/UploadToServer.php";
uploadButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
dialog = ProgressDialog.show(UploadToServer.this, "",
"Uploading file...", true);
new Thread(new Runnable() {
public void run() {
runOnUiThread(new Runnable() {
public void run() {
messageText.setText("uploading started.....");
}
});
uploadFile(uploadFilePath + "" + uploadFileName);
}
}).start();
}
});
}
public int uploadFile(String sourceFileUri) {
String fileName = sourceFileUri;
HttpURLConnection connection = null;
DataOutputStream dos = null;
String lineEnd = "\r\n";
String twoHyphens = "--";
String boundary = "*****";
int bytesRead, bytesAvailable, bufferSize;
byte[] buffer;
int maxBufferSize = 1 * 1024 * 1024;
File sourceFile = new File(sourceFileUri);
if (!sourceFile.isFile()) {
dialog.dismiss();
Log.e("uploadFile", "Source File not exist :" + uploadFilePath + ""
+ uploadFileName);
runOnUiThread(new Runnable() {
public void run() {
messageText.setText("Source File not exist :"
+ uploadFilePath + "" + uploadFileName);
}
});
return 0;
} else {
try {
// open a URL connection to the Servlet
FileInputStream fileInputStream = new FileInputStream(
sourceFile);
URL url = new URL(upLoadServerUri);
// Open a HTTP connection to the URL
connection = (HttpURLConnection) url.openConnection();
connection.setDoInput(true); // Allow Inputs
connection.setDoOutput(true); // Allow Outputs
connection.setUseCaches(false); // Don't use a Cached Copy
connection.setRequestMethod("POST");
connection.setRequestProperty("Connection", "Keep-Alive");
connection.setRequestProperty("ENCTYPE", "multipart/form-data");
connection.setRequestProperty("Content-Type",
"multipart/form-data;boundary=" + boundary);
connection.setRequestProperty("uploaded_file", fileName);
dos = new DataOutputStream(connection.getOutputStream());
dos.writeBytes(twoHyphens + boundary + lineEnd);
// dos.writeBytes("Content-Disposition: form-data; name=\"uploaded_file\";filename=\""
// + fileName + "\"" + lineEnd);
dos.writeBytes("Content-Disposition: post-data; name=uploadedfile;filename="
+ URLEncoder.encode(fileName, "UTF-8") + lineEnd);
dos.writeBytes(lineEnd);
// create a buffer of maximum size
bytesAvailable = fileInputStream.available();
bufferSize = Math.min(bytesAvailable, maxBufferSize);
buffer = new byte[bufferSize];
// read file and write it into form...
bytesRead = fileInputStream.read(buffer, 0, bufferSize);
while (bytesRead > 0) {
dos.write(buffer, 0, bufferSize);
bytesAvailable = fileInputStream.available();
bufferSize = Math.min(bytesAvailable, maxBufferSize);
bytesRead = fileInputStream.read(buffer, 0, bufferSize);
}
// send multipart form data necesssary after file data...
dos.writeBytes(lineEnd);
dos.writeBytes(twoHyphens + boundary + twoHyphens + lineEnd);
// Responses from the server (code and message)
int serverResponseCode = connection.getResponseCode();
String serverResponseMessage = connection.getResponseMessage();
Log.i("uploadFile", "HTTP Response is : "
+ serverResponseMessage + ": " + serverResponseCode);
if (serverResponseCode == 200) {
runOnUiThread(new Runnable() {
public void run() {
String msg = "File Upload Completed.\n\n See uploaded file here : \n\n"
+ " http://www.androidexample.com/media/uploads/"
+ uploadFileName;
messageText.setText(msg);
Toast.makeText(UploadToServer.this,
"File Upload Complete.", Toast.LENGTH_SHORT)
.show();
}
});
}
// close the streams //
fileInputStream.close();
dos.flush();
dos.close();
} catch (MalformedURLException ex) {
dialog.dismiss();
ex.printStackTrace();
runOnUiThread(new Runnable() {
public void run() {
messageText
.setText("MalformedURLException Exception : check script url.");
Toast.makeText(UploadToServer.this,
"MalformedURLException", Toast.LENGTH_SHORT)
.show();
}
});
Log.e("Upload file to server", "error: " + ex.getMessage(), ex);
} catch (Exception e) {
dialog.dismiss();
e.printStackTrace();
runOnUiThread(new Runnable() {
public void run() {
messageText.setText("Got Exception : see logcat ");
Toast.makeText(UploadToServer.this,
"Got Exception : see logcat ",
Toast.LENGTH_SHORT).show();
}
});
Log.e("Upload file to server Exception",
"Exception : " + e.getMessage(), e);
}
dialog.dismiss();
return serverResponseCode;
} // End else block
}
PHP 파일
<?php
$target_path = "./Upload/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
} else {
echo "There was an error uploading the file, please try again!";
}
?>
언급URL : https://stackoverflow.com/questions/34485420/how-do-you-put-an-image-file-in-a-json-object
'programing' 카테고리의 다른 글
| MongoDB 모든 컬렉션의 모든 콘텐츠 표시 (0) | 2023.04.04 |
|---|---|
| Java 시리얼화 vs JSON vs XML (0) | 2023.04.04 |
| 안드로이드에서 GSON이나 다른 라이브러리를 사용하지 않고 Retrofit을 사용하여 String으로 응답하는 방법 (0) | 2023.04.04 |
| 렌더링하는 동안 React 구성 요소가 일시 중단되었지만 폴백 UI가 지정되지 않았습니다. (0) | 2023.04.04 |
| 컨스트럭터 또는 componentWillMount에서 초기 반응 구성 요소 상태를 설정합니다. (0) | 2023.03.25 |