如何使用MEAN堆栈在浏览器中再次显示上传的图片，以断绝一边？ [英] How to show uploaded images to the sever side once again in browser using MEAN stack?
问题描述
我使用MEAN堆栈来编写和应用上传图片，有它的preVIEW，并在同一时间到该图像上传到服务器（在防爆preSS服务器）和savinig它MongoDB中的数据库。另外一边，我需要这个得到这个形象从蒙戈和服务器返回到浏览器再次显示。这
这里是我的接线方式：
客户端：使用法里德丹尼尔custsom指令中的HTML上传按钮
I am using MEAN stack to write and app to upload an image, to have a preview of it, and at the same time to upload this image to server(server in Express) and savinig it in MongoDB database. On the other hand side, I need this get this image back from Mongo and Server to display in on the browser once again. Here is my wiring: Client-side: Using Farid Daniel custsom directive the HTML uploading button is
<span class="btn btn-default btn-file">
<input type="file" ngf-select ngf-change="uploadFile($files)" accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">Upload Image</input>
</span>
要preVIEW这里：
to preview here:
<img id="preview" src="http://lorempixel.com/150/150/fashion/" width="150px" height="150px" class="img-circle center"></img>
和上载到这个断绝AngularJS codeS：
and get uploaded to sever with this AngularJS codes:
$scope.uploadFile = function(files) {
if(files.length > 0){
var preview = document.getElementById("preview");
preview.file = files[0];
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(preview);
console.log(files[0]);
reader.readAsDataURL(files[0]);
// uploading image to server
var filename = files[0].name;
var type = files[0].type;
var query = {
filename: filename,
type: type
};
Upload.upload(
{
url: '/image/' + $rootScope.candidateList[parseInt(candiateIndex)]._id,
method: 'PUT',
// data: data // Any data needed to be submitted along with the files
file: files
}).progress(function(evt){
// console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config){
// console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
console.log("Image succesfully uploaded to server");
}).error(function(error){
console.log("Error uploading image to server");
});
}
};
有关服务器端我写了这个：
For the server-side I have written this:
app.put('/image/:id', multipartyMiddleware, function(req, res){
var id = req.params.id;
console.log('Server: I get a PUT request to update an image for candide');
var file = req.files.file;
console.log(file);
db.candidateList.findAndModify({
query: {_id: mongojs.ObjectId(id)},
update: {$set: {file: req.files.file}},
new: true},
function (err, doc) {
res.json(doc);
}
);});
到目前为止好！这是我在服务器端得到一个文件
So far so good!, and this is what I get in the server side from one file
[ { fieldName: 'file[0]',
originalFilename: '12095188_1085272848151633_8297555958524563020_o.png',
path: '/tmp/kHFe3Cm6w831_1lWQ6OEXlOE.png',
headers:
{ 'content-disposition': 'form-data; name="file[0]"; filename="12095188_1085272848151633_8297555958524563020_o.png"',
'content-type': 'image/png' },
size: 530699,
name: '12095188_1085272848151633_8297555958524563020_o.png',
type: 'image/png' } ]
但是，当我得到在客户端这回展示其形象的一部分失败的用户。这里是snipet的得到codeS里angularJS身边。
BUT, when I get this back on the client side to show to the user its image part fails. here is snipet of get codes in angularJS side.
$http.get('/condidateslist').success(function(data){
$rootScope.candidateList = data;
$rootScope.candide = $rootScope.candidateList[parseInt(candiateIndex)];
console.log($rootScope.candide);
var preview = document.getElementById("preview");
preview.file = $rootScope.candide.file;
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(preview);
reader.readAsDataURL($rootScope.candide.file);
}).error(function(error){
console.log("Cant find contact information");
});
由于以下错误：
**TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.**
我无法在这里找到了类似的问题，但我知道这是commont行动和解决方案应该很容易。
I couldn't find a similar question here, but I know it's commont action, and solution should be easy.
推荐答案
本的FileReader对象允许Web应用程序的异步读取存储在用户的计算机上的文件（或原始数据的缓冲区）的内容，使用文件或BLOB对象指定的文件或数据读取。
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
那么，你是错误地使用它来读取服务器上的文件
So you are wrongly using it to read files from server
所以，你需要做的要显示的图像是揭露关于范围的候选人驱动的观点，什么然后在视图，你要显示的图片
So what you need to do to display the image is to expose the candidate on scope that drives the view and then in view where you want to display the image
<image ng-src="path/to/file/directory/{{candidate.name}}" />
其中， candidate.name 是图像文件的名称
这篇关于如何使用MEAN堆栈在浏览器中再次显示上传的图片，以断绝一边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
