node.js 使用 socketio-file-upload 从 ipad 上传图片

Question

我正在用 express.js / node.js 编写一个应用程序

我有一个输入类型为“文件”的表单，用于上传图片。

我想直接上传我的图片，无需用户确认。并在裁剪并存储到目录后显示在用户屏幕上。

为此，我使用了 socketio-file-upload 库。

它在计算机上运行良好。我可以上传我的图片并显示它们。

问题出在 Ipad 上（我还没试过 Iphone）

在网络应用程序上，当我点击“浏览”按钮时，我可以选择现有图片或拍照。我尝试拍照并上传，但没有任何反应...

这是上传服务器的代码：

io.of('/register').on('connection', function (socket) {
/***************FILE UPLOAD***********************/
// Make an instance of socketioFileUploadServer and listen on this socket:
var uploader = new socketioFileUploadServer();
uploader.dir = __dirname + '/client/tmp/markers';
uploader.listen(socket);
// Do something when a file is saved:
uploader.on('saved', function(event){
    console.log('Original saved');
    // resize and rename image with a unique id
    var newName = Math.random().toString(36).substr(2, 9);
    // marker 32x32
    easyimg.rescrop({src:path.resolve(__dirname, 'client/tmp/markers/' + event.file.name), dst:path.resolve(__dirname, 'client/tmp/markers/' + newName + '_marker'), width:32, height:32}, function(err, image) {
        if (err) throw err;
        console.log('Resized and cropped: ' + image.width + ' x ' + image.height);
        // marker is uploaded - resized - croped, now display it
        socket.emit('displayMarker', {markerPath : '/tmp/markers/' + newName + '_marker', markerName : newName});
        // remove original from file system
        fs.unlink(path.resolve(__dirname, 'client/tmp/markers/' + event.file.name), function(){
            if (err) throw err;
            console.log('Original removed'); 
        });
    });
});

uploader.on('start', function(event){
    console.log('Client start upload');
    socket.emit('displayOverlay');
});

// Error handler:
uploader.on('error', function(event){
    console.log("Error from uploader", event);
});
});

和客户端：

document.addEventListener("DOMContentLoaded", function(){

// REGISTRATION MARKER 
var socketMarker    = io.connect('/register'); 
var siofuMarker     = new SocketIOFileUpload(socketMarker);

siofuMarker.listenOnInput(document.getElementById("uploadMarkerFromExploratorInput"));

// Do something when a file is uploaded:
siofuMarker.addEventListener("complete", function(event){
   $('.overlay').hide(); 
});

// display loader window
socketMarker.on('displayOverlay', displayOverlay);

// server send we can display the marker in the register step1 view
socketMarker.on('displayMarker', function(data) {
    $('#markerImage').html('');
    $('#markerImage').html('<img src="' + data.markerPath + '" />');
    $('#markerImageName').val(data.markerName);
});

});

使用电脑，控制台会显示：

Client start upload
Original saved
Resized and cropped: 32 x 32
Original removed

还有 Ipad ：

Client start upload

有人有想法或其他方法来获得相同的结果吗？

感谢您的帮助。 C.

Answer 1

正如我所怀疑的，您需要为 File Input 元素的 HTML 标记添加适当的属性：

<input type="file" accept="image/*" capture="camera">

这应该可以解决问题。要理解的最重要的部分是“accepts”属性。