--Utilisez ruby sur les rails 6.0.0.
Ceci est un synopsis de la dernière fois (part4) . Nous avons pu implémenter des fonctions d'enregistrement et d'édition des informations produit qui incluent plusieurs images. On a l'impression que le travail est terminé.
Soit dit en passant, l'introduction et la procédure sont décrites en détail dans la <a href="https://qiita.com/silvercrow222/items/55aeb5d13ec2bde305db""> part1 , alors jetez un œil si vous êtes intéressé.
Allons! Il ne reste plus que l'aperçu!
Commençons par js. Ce que vous faites est similaire à ce que vous avez fait avec le formulaire.
Créez une fonction pour la génération html et affichez un nouveau formulaire en même temps. Si vous supprimez l'image, l'aperçu disparaîtra également.
app/assets/javascripts/product.js
$(function() {
// ~réduction~
const buildImg = (index, url)=> {
const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
return html;
}
// ~réduction~
$('#image-box').on('change', '.file', function(e) {
const targetIndex = $(this).parent().data('index');
const file = e.target.files[0];
const blobUrl = window.URL.createObjectURL(file);
if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
img.setAttribute('src', blobUrl);
} else {
$('#image-box').append(buildFileField(fileIndex[0]));
fileIndex.shift();
fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
}
});
// ~réduction~
$('#image-box').on('click', '.remove', function() {
// ~réduction~
$(`img[data-index="${targetIndex}"]`).remove();
});
});
Ça fait longtemps, mais c'est comme ça. Seule la partie médiane est compliquée, donc je ne pense pas que je serai aussi préparé.
Ajoutons des explications dans l'ordre.
const buildImg = (index, url)=> {
const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
return html;
Tout d'abord, c'est une fonction pour générer du html, mais je pense que c'est correct car il n'y a rien de particulièrement difficile. L'image est affichée en spécifiant la taille avec l'url passée en argument.
$('#image-box').on('change', '.file', function(e) {
//Obtenez l'index unique attribué au formulaire.
const targetIndex = $(this).parent().data('index');
//Obtenez l'URL du fichier image sur le Web.
const file = e.target.files[0];
const blobUrl = window.URL.createObjectURL(file);
//Branchement conditionnel en fonction de la présence ou de l'absence d'une image avec l'index correspondant
if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
//Remplacez l'URL de l'image obtenue à la ligne précédente.
img.setAttribute('src', blobUrl);
} else {
$('#previews').append(buildImg(targetIndex, blobUrl));
$('#image-box').append(buildFileField(fileIndex[0]));
fileIndex.shift();
fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
C'est le processus lorsque l'image suivante est sélectionnée. Le contenu est comme ça.
Il est difficile d'obtenir l'URL sur les 5e et 6e lignes, mais je ne suis pas sûr à ce sujet, donc je vais l'étudier en détail plus tard. Soyez assuré que l'opération elle-même fonctionnera.
À propos, la partie suivante n'est qu'un affichage d'aperçu ajouté à la description d'origine, veuillez donc consulter la partie précédente pour plus de détails.
La raison de les déplacer ci-dessous est que dans l'état précédent, un nouveau formulaire était affiché simplement en remplaçant l'image. Donc, en mettant ces gars sous autre, le formulaire ne sera ajouté que lors de l'ajout d'une image.
$(`img[data-index="${targetIndex}"]`).remove();
C'est le dernier, mais je supprime simplement l'aperçu avec le bouton de suppression. C'est vraiment ça.
Maintenant que le traitement js est terminé, ajoutons un aperçu qui devrait être affiché à l'avance sur l'écran d'édition.
haml:app/views/products/_form.html.haml
= form_with model: @product, local: true do |f|
= f.text_field :name, placeholder: 'name'
#image-box
#previews
- if @product.persisted?
- @product.images.each_with_index do |image, i|
= image_tag image.src.url, data: { index: i }, width: '100', height: '100'
= f.fields_for :images do |i|
// ~réduction~
= f.submit 'SEND'
J'ai ajouté la partie *@product.persisted? *. Les images associées au produit sont extraites une à une par url et affichées à l'aide de l'image_tag
À propos, .each_with_index est une méthode qui attribue des nombres un par un en même temps que .each en définissant deux arguments.
Désormais, la fonction de prévisualisation est également implémentée. Cela signifie
Enfin terminé! !! Cela a pris un certain temps, mais j'ai réussi à le terminer. Huh.
Bien qu'on dise qu'il est terminé, seul l'aspect fonctionnel a été complété, donc on a l'impression de marquer lentement.
Cependant, j'ai pu implémenter tout le contenu des spécifications. Je suis désolé de l'avoir écrit pendant longtemps même si je ne fais pas vraiment de choses difficiles.
Je ne pense pas que ce soit là, mais merci pour longtemps si quelqu'un l'a lu jusqu'au bout. J'espère que cela vous sera utile.
Recommended Posts