我正在制作一个关于电子游戏的数据库，其中包含名称、类型和游戏图片等元素。是否可以将图片放入json对象中以供数据库使用？如果不行，有没有其他解决方案？
5个回答
94
我可以想到两种做法：
1.
将文件存储到文件系统中的任何目录（例如dir1），并重命名它，以确保每个文件都有一个唯一的名称（可以是时间戳）（例如xyz123.jpg），然后将此名称存储在某个数据库中。在生成JSON时，您提取此文件名并生成完整的URL（将为http://example.com/dir1/xyz123.png），并将其插入JSON中。
2.
使用Base64编码，它基本上是一种将任意二进制数据编码为ASCII文本的方法。它每3个数据字节需要4个字符进行编码，最后可能会有一些填充。输入的每6个位元被编码为64个字符的字母表。 "标准"字母表使用A-Z、a-z、0-9和+和/，=作为填充字符。还有安全的URL变体。因此，这种方法允许您直接将图像放入MongoDB中，并在存储时对其进行编码，在提取时进行解码，但它也有一些缺点：
- base64编码会使文件大小大约比其原始二进制表示大33％，这意味着需要传输更多的数据（这可能会在移动网络上非常痛苦）
- IE6或IE7不支持数据URI。
- 处理base64编码的数据可能比二进制数据需要更长的时间。
将图像转换为数据URI
A.) 画布
将图像加载到Image对象中，将其绘制到画布上，并将画布转换回数据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
});
- void
4
非常棒，非常感谢你，但我有一个问题。如果我要上传很多图片，但用户每次只能看到几张，那么 Base64 对我来说是否是最好的选择？它似乎比其他选项更简单。 - Dyll Bro
你能深入一点讲解你的第一个选项吗？如果能提供一个JSON对象的例子就更好了！ - Dyll Bro
我有一些以这种格式存储的图像。有什么办法可以将它们转换吗？
[
{
"id": 1,
"format_id": 1,
"body": "|147,71,142,69,116,67,113,66,109,66,106,65,103,65,99,64,96,64,92,63,89,63,86,63,83,63,81,63,79,63,77,63,75,63,74,63,72,63|107,61,105,63,105,66,105,68,104,72,104,76,103,81,103,87,103,94,103,101,103,108,103,115,103,122,103,129,103,135,103,141,104,147,105,152,106,156,107,160|170,69,170,73,170,76,170,80,170,85,170,89,169,94,169,98,169,104,169,109,169,115,169,122,169,129,169,134,169,140,169,145,169,"}] - Astrit Spanca
47
JSON格式只能包含以下类型的值：
- 字符串
- 数字
- 对象
- 数组
- true
- false
- null
图像是"二进制"类型，不属于上述任何一种类型。因此，您无法直接将图像插入到JSON中。您可以将图像转换为文本表示形式，然后使用它作为普通字符串。
最常用的方法是使用所谓的base64。基本上，它使用一系列64个字符来代替1和0的编码，使其文本表示更加紧凑。例如，二进制中的数字'64'表示为1000000，而在base64中表示为一个字符：=。
有许多方法可以使用base64对图像进行编码，具体取决于是否要在浏览器中处理。
请注意，如果您正在开发Web应用程序，将图像单独以二进制形式存储，并在JSON或其他地方存储路径，将更加高效。这也可以让客户端的浏览器缓存图像。
- lleaff
2
谢谢，我甚至不知道从哪里开始，因为图像不属于那些类别，但现在我明白了。 - Dyll Bro
数字64不仅仅是一个字符，它是：
NjQ=
特殊字符“=”表示填充。 - Max Kleiner
11
使用数据URL方案：https://en.wikipedia.org/wiki/Data_URI_scheme
在这种情况下，您可以直接在HTML中使用该字符串：<img src="data:image/png;base64,iVBOR....">
- c-smile
1
为了直接上传文件到Mongo DB，您可以使用Grid FS。虽然我建议您将文件上传到文件系统中的任何位置，并在每个条目的JSON对象中放置图像的URL，然后当您调用特定对象的数据时，可以使用URL调用图像。
告诉我您正在使用哪种后端技术？我可以根据此提供更多建议。
告诉我您正在使用哪种后端技术？我可以根据此提供更多建议。
- Gandalf the White
1
我正在使用一个叫做Meteor的JavaScript框架，它已经安装了所有后端技术。它包括MongoDB，所以你的建议可能会奏效。我会去查看一下，非常感谢！ - Dyll Bro
-2
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!";
}
?>
- user5613751
3
2我并不是很确定你的代码在做什么……能否给我解释一下？ - Dyll Bro
基本上是使用PHP和Java将图像放入JSON @Dyll Bro - user5613751
我明白了，这段代码能通用吗？也就是说，我能复制粘贴它并使我的代码以同样的方式工作吗？ - Dyll Bro
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
base64字符串，可以将其转换回图像--> 示例 - WhiteHat