>

이 모듈을 사용하여 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는 업데이트하지 않습니다. 어떤 제안이라도 감사하겠습니다. 감사합니다.

  • 답변 # 1

    이미지를 업로드 할 때마다 이미지 이름이 동일하고 동일한 이름으로 다른 이미지를 업로드 한 것을 브라우저가 알 수있는 방법이 없기 때문입니다. 그래도 해결 방법이 있습니다. 클라이언트 측에서 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()}`);
    });
    
    

관련 자료

  • 이전 amazon web services - AWS Federated Identity Pool 용 엔터프라이즈 Google 도메인으로 로그인 제한
  • 다음 MySQL은 관련 테이블의 모든 레코드를 많은 수에서 많은 수로 가져옵니다