Question

使用react js我需要多个图像上传和预览我尝试使用下面的代码不起作用它显示我在控制台中的错误

未捕获DOMException：无法设置＆＃39;值＆＃39;财产＆＃39; HTMLInputElement＆＃39;：此输入元素接受可能的文件名只能以编程方式设置为空字符串。

uploadImage(e){
    var numFiles = e.target.files.length; 
    for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++){ 
            var file = e.target.files[i];
            if(!file.type.match('image'))
            continue;
            var reader = new FileReader();
        reader.onload = function(e) {
            setOfImages.push({
              fileName:file.name,
              image:e.target.result.split(',')[1]
            });
            for(var j = 0; j<setOfImages.length; j++) {
                $('.placeholder-blk').prepend('<div class="image-placeholder"><img src="data:image/jpeg;base64,'+ setOfImages[j].image +'" /></div>');
            }
            console.log(setOfImages);
        }
        reader.readAsDataURL(file);
    }
}
<input type="file" name="image-uploder" id="image-uploder" className="file-loader" onChange={this.uploadImage.bind(this)} multiple />

Answer 1

您是否尝试将值添加到状态并从状态填充名称。像

这样的东西

MyClass::doStuff(QString& str) { /* ... */ }

// ...

QString a("test");
std::thread thr(&MyClass::doStuff, this, std::ref(a)); // wrap references

并在你的函数里面填充状态。

<input type="file" name={this.state.setOfImages} id="image-uploder" className="file-loader" onChange={this.uploadImage.bind(this)} multiple />

像这样的东西。

this.setState({setOfImages: JSON.stringify(setOfImages)})

现在首先输入将填充空数组。当您单击按钮时，状态将通过设置setOfImages = [＆＃34; hello＆＃34;，＆＃34; hi＆＃34;]并将输入值设置为这些值来改变。

Answer 2

这没有任何意义$('.placeholder-blk').remove();然后尝试前置到那个？它已经消失了。

这里只有第一个文件？

var file = e.target.files[0];

您的意思是处理文件

var numFiles = e.target.files.length; 
for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++) 
{ var file = e.target.files[i]; .. }

请在此处参考如何生成：developer.mozilla.org/en-US/docs/

通过预览反应js多个图像上传

2 个答案: