Ich habe irgendwo auf meiner Bewerbungsseite ein Logo.Wie lade ich ein Bild mit Meteor auf meinen Server hoch?
Der Anwendungsadministrator sollte in der Lage sein, das Logo innerhalb der Webapplikation anzupassen, indem Sie einfach ein neues hochladen. Was wäre die beste Vorgehensweise, um dies zu erreichen?
Wie würde ich den Upload auf dem Server behandeln. Es sollte das alte Logo durch das neue ersetzen. Der Name und der Ort sollten gleich bleiben.
Hier ist mein Ansatz:
ich das Paket
jalik:ufs
jalik:ufs-local
autopublish //it is still on, so the code below works without publish/subscribe I know that I will have to change that.
Mein Code UploadFS:
verwenden:hochladen
* .js Server & Client-
//Almost Standard initialization - works so far
Logo = new Mongo.Collection('logo');
LogoStore = new UploadFS.store.Local({
collection: Logo,
name: 'logo',
path: '/uploads/logo',
mode: '0744', // directory permissions
writeMode: '0744', // file permissions
filter: new UploadFS.Filter({
minSize: 1,
maxSize: 1024 * 1000, // 1MB,
contentTypes: ['image/*'],
extensions: ['png']
})
});
* .html
//Standard initialization - works so far
<template name="upload">
<button type="button" name="upload">Select files</button>
</template>
* .js-Client
//Almost Standard initialization - works so far
Template.upload.events({
'click button[name=upload]': function (ev) {
var self = this;
UploadFS.selectFiles(function (file) {
// Prepare the file to insert in database, note that we don't provide an URL,
// it will be set automatically by the uploader when file transfer is complete.
var logo = {
name: 'logo.png', //all uploaded images will have the same name
size: file.size,
type: file.type,
};
// Create a new Uploader for this file
var uploader = new UploadFS.Uploader({
// This is where the uploader will save the file
store: LogoStore,
// Optimize speed transfer by increasing/decreasing chunk size automatically
adaptive: true,
// Define the upload capacity (if upload speed is 1MB/s, then it will try to maintain upload at 80%, so 800KB/s)
// (used only if adaptive = true)
capacity: 0.8, // 80%
// The size of each chunk sent to the server
chunkSize: 8 * 1024, // 8k
// The max chunk size (used only if adaptive = true)
maxChunkSize: 128 * 1024, // 128k
// This tells how many tries to do if an error occurs during upload
maxTries: 5,
// The File/Blob object containing the data
data: file,
// The document to save in the collection
file: logo,
// The error callback
onError: function (err) {
console.error(err);
},
onAbort: function (file) {
console.log(file.name + ' upload has been aborted');
},
onComplete: function (file) {
console.log(file.name + ' has been uploaded');
},
onCreate: function (file) {
console.log(file.name + ' has been created with ID ' + file._id);
},
onProgress: function (file, progress) {
console.log(file.name + ' ' + (progress*100) + '% uploaded');
},
onStart: function (file) {
console.log(file.name + ' started');
},
onStop: function (file) {
console.log(file.name + ' stopped');
}
});
// Starts the upload
uploader.start();
// Stops the upload
uploader.stop();
// Abort the upload
uploader.abort();
});
}
});
anzeigen hochgeladen Logo
* .html
<template name="whatever">
<img src="{{logoUrl}}" alt="Logo" >
</template>
* Js Client onl y
Template.whatever.helpers({
logoUrl: function(){
return Logo.findOne().url;
}
})
Also, wenn ich es richtig verstehen, was der Code tut, ist das img auf dem Server irgendwo hochladen. Außerdem speichert es einige Informationen über dieses Bild in einem Mongo.Collection-Logo.
Aber ich weiß nicht genau, wo diese Bilder gespeichert sind, in welchem Ordner. Sie sind nicht in meinem Standard-Projektordner gespeichert. Die URL eines Beispiels img ist: http://localhost:3000/ufs/logo/B4Fv5etkr7xQbvs5v/logo.png. Diese zufällige Zeichenfolge in der Mitte ist die _id des img. Daher kann ich keine fest codierte URL verwenden, um auf diese Bilder zuzugreifen, denn sobald ein neues IMG hochgeladen wird, wird sich diese URL vollständig ändern.
Q1: Die erste Frage lautet also: Kann ich direkt in den Ordner myProject/public/img hochladen? So dass die URL des IMG wäre so etwas wie: http://localhost:3000/img/logo.png Dann müsste ich nur das alte Logo auf dem Upload ersetzen.
Für jetzt muss ich mit der generischen URL beschäftigen. Als nächstes wähle ich die URL des jetzt vorhandenen Bildes auf dem Server aus der Logo - Sammlung aus und übertrage diese URL zu meiner Vorlage an die Stelle, wo das Logo platziert werden soll. Das Problem dabei ist, dass die URL geladen wird, nachdem alles andere geladen wurde, also bekomme ich für einige Sekunden ein Tag ohne eine URL drin. Dieser Ort zeigt den Alt-Text nur solange, bis die URL geladen ist. Das ist sehr hässlich ...
Q2: Die Frage ist, wie könnte ich die URL bekommen, bevor das Tag geladen wird. Damit das Logo mit/vor allem anderen erscheint, als wäre die URL vorab hartcodiert.
F3: Ist es möglich, das alte Logo durch das neu hochgeladene zu ersetzen? Wie?
Q4: Wenn ich den Eintrag für den img aus der Logo - Collection lösche, wird das Bild tatsächlich vom Server gelöscht? Oder muss ich es manuell/auf andere Weise löschen?
Die andere Frage bezieht sich auf mehrere Bilder auf eine dritte Partei hochgeladen. Ich möchte ein einzelnes Bild auf meinen Server hochladen, vorzugsweise in den öffentlichen Ordner. – henk
Diese Frage wird in verschiedenen Geschmacksrichtungen etwa einmal pro Woche gestellt. Außerdem fragen Sie im Grunde nur nach Code, anstatt mit dem vorhandenen Code zu helfen. Fragen der Form "Wie würde ich X machen?" sind nicht gut für Stackoverflow geeignet. Die neuen Stackoverflow-Dokumentations-Seiten sind hierfür ideal, werden aber immer noch gefüllt. Wenn also keine der vorhandenen Antworten für Sie funktioniert, dann zeigen Sie, was Sie versucht haben, und wir werden versuchen, Ihnen zu helfen. –
Danke, dass Sie mir das Problem mit meiner Frage erklärt haben. Ich habe meinen eigenen Ansatz hinzugefügt und die Probleme, mit denen ich bisher konfrontiert bin, mit diesem Ansatz erläutert. – henk