src изображения не меняется, когда пользователь снова загружает изображение (socket.io)

Я использую этот модуль для загрузки изображений через socket.io.
Вот код на стороне клиента:

<img src="/img/avatar-2-128.png" alt="" id="signinbox_photo"> //avatar-2-128.png is an avatar that will be replaced
<input type="file" id="siofu_input" />


//upload the image to the server
var uploader = new SocketIOFileUpload(socket);
uploader.listenOnInput(document.getElementById("siofu_input"));

socket.on('update photo', function(data){ //update the src attr of the img tag
    var signinbox_photo = $('#signinbox_photo');
    signinbox_photo.attr("src",`/img/user_images/${data.id}.jpg`);
});

Сторона сервера:

var fs = require('fs');
var siofu = require("socketio-file-upload");

io.sockets.on('connection', function(socket) {
    var uploader = new siofu();
    var dir = "./public/img/user_images/"
    uploader.dir = dir;
    uploader.listen(socket); //save the file

    uploader.on("saved", function(event){
        fs.rename(dir + event.file.name, dir + socket.id + ".jpg", function(err) { //replace the file name to socket id
            if ( err ) console.log('ERROR: ' + err);
        });
        io.sockets.emit('update photo', {id: socket.id}) //emit to client so it updates the src of the image
    });

});

Когда пользователь загружает изображение, оно работает, и все идет так, как ожидалось, но когда пользователь загружает снова, он заменяет файл на сервере, но не обновляет src изображения в клиенте. Любое предложение будет оценено. Спасибо.


javascript socket.io jquery socket.io-1.0
person Cedric Hadjian    schedule 28.06.2018    source источник
comment
URL-адрес, который вы передаете атрибуту src, находится внутри обратных галочек. ```. Это используется для передачи литеральной строки. Попробуйте с одинарными кавычками ', так как у вас есть переменная для интерпретации внутри нее...   -  person Louys Patrice Bessette    schedule 28.06.2018
comment
Вы имеете в виду только data, а не data.id. Похоже, вы передаете id из socket.id, но я мало что знаю о socket.io   -  person Jimenemex    schedule 28.06.2018
comment
@LouysPatriceBessette То же самое, я попробовал твой способ, и это не сработало.   -  person Cedric Hadjian    schedule 28.06.2018
comment
Данные @Jimenemex — это объект, в котором есть переданный идентификатор от emit.   -  person Cedric Hadjian    schedule 28.06.2018
comment
Хорошо.. Тогда попробуйте console.log("/img/user_images/${data.id}.jpg");, чтобы убедиться, что это правильный источник...   -  person Louys Patrice Bessette    schedule 28.06.2018
comment
@LouysPatriceBessette Это абсолютно правильно, он действительно обновляет src, как я уже сказал, он не может обновить src только тогда, когда пользователь пытается загрузить снова   -  person Cedric Hadjian    schedule 28.06.2018
comment
Попробуйте удалить тег <img> и просто создать его заново?   -  person Jimenemex    schedule 28.06.2018
comment
@Jimenemex Я только что попробовал, он все еще не меняется ... Пока src тот же, он просто не меняется.   -  person Cedric Hadjian    schedule 28.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Это связано с тем, что каждый раз, когда вы загружаете изображение, имя изображения одно и то же, и браузер не может не знать, что вы загрузили другое изображение с тем же именем. Однако есть обходной путь. Вы можете добавить случайное число в качестве параметра запроса при назначении src на стороне клиента следующим образом:

//upload the image to the server
var uploader = new SocketIOFileUpload(socket);
uploader.listenOnInput(document.getElementById("siofu_input"));

socket.on('update photo', function(data){ //update the src attr of the img tag
    var signinbox_photo = $('#signinbox_photo');
    signinbox_photo.attr("src",`/img/user_images/${data.id}.jpg?r=${Math.random()}`);
});
person Nitin Bhapkar    schedule 28.06.2018
comment
Да, я думал об этом таким образом, но проблема в том, что я буду использовать socket.id для рендеринга изображения, когда пользователь входит в систему (временный вход) - person Cedric Hadjian; 28.06.2018
comment
Вы можете использовать socket.id для рендеринга изображения, случайное число просто для того, чтобы убедиться, что браузер повторно запросит изображение после загрузки. - person Nitin Bhapkar; 28.06.2018