webuploader 多图上传，修改信息时，如何回显这些图片

Question

现在已经实现多图上传，但是不太清楚如何在修改时回显，模拟插件添加图片，但是模拟的方法有错，

var files=[{"id":"WU_FILE_0","name":"1478598670983.jpg","type":"image/jpg","size":1523,"url":"../uploadImg/1478598670983.jpg"},{"id":"WU_FILE_1","name":"1478598674559.jpg","type":"image/jpg","size":1523,"url":"../uploadImg/1478598674559.jpg"},{"id":"WU_FILE_2","name":"1478598677967.jpg","type":"image/jpg","size":1523,"url":"../uploadImg/1478598677967.jpg"}];
                                    for(var i = 0; i < files.length; i++){  
                                        var obj ={};  
                                        statusMap = {};  
                                        fileCount++;  
                                        fileSize += files[i].size;  
                                        if ( fileCount === 1 ) {  
                                            placeholder.addClass( 'element-invisible' );  
                                            statusBar.show();  
                                        }  
                                        obj.id=files[i].id;  
                                        obj.name=files[i].name;  
                                        obj.type=files[i].type;  
                                        obj.size=files[i].size;  
                                        obj.ret=files[i].url;  
                                        obj.source=this;  
                                        obj.flog=true;  
                                        obj.status = 'complete',  
                                        obj.getStatus = function(){  
                                            return '';  
                                        }  
                                        obj.version = WebUploader.Base.version;  
                                        obj.statusText = '';  
                                        obj.setStatus = function(){  
                                            var prevStatus = statusMap[this.id];  
                                            typeof text !== 'undefined' && (this.statusText = text);  
                                            if(status !== prevStatus){  
                                                statusMap[this.id] = status;  
                                                //文件状态设置为已完成  
                                                uploader[index].trigger('statuschage',status,prevStatus);  
                                            }  
                                        }  
                                        addFile( obj,uploader[index],queue);  
                                        setState( 'ready' ,uploader[index],placeholder,queue,statusBar,jxfilePicker);  
                                        updateStatus('ready',info,fileCount,fileSize);  
                                    } 

这样图片不会出现，只会有预览中三个字，感觉思路混乱，望指点

Answer 1

首先向图片转成File类型，然后通过addFiles把图片添加到队列。

//初始化
var uploader = WebUploader.Uploader({...});

var getFileBlob = function (url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.addEventListener('load', function() {
  cb(xhr.response);
  });
  xhr.send();
};

var blobToFile = function (blob, name) {
  blob.lastModifiedDate = new Date();
  blob.name = name;
  return blob;
};

var getFileObject = function(filePathOrUrl, cb) {
  getFileBlob(filePathOrUrl, function (blob) {
  cb(blobToFile(blob, 'test.jpg'));
  });
};

//需要编辑的图片列表
var picList = ['图片url','图片url','图片url','图片url' ]
$.each(picList, function(index,item){
  getFileObject(item, function (fileObject) {
    var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'),fileObject);
    var file = new WebUploader.File(wuFile);
    uploader.addFiles(file)
  })
});

Answer 2

请问你这个问题难题解决了吗？

Answer 3

//接收服务器返回信息
        //这里才是接收服务器信息的地方,如果有出错就 `return false` 来停止上传
        uploader.on( 'uploadAccept', function( file, response ) {
            var str = response._raw;
            var info = eval('(' + str + ')');
            console.log(info);
            //if ( hasError ) {
            //    // 通过return false来告诉组件，此文件上传有错。
            //    return false;
            //}
        });

服务器上传完就用它接收地址呗

Answer 4

我也是，可以上传，但是编辑的时候怎么解决

Answer 5

修改时调用方法：
var getFileBlob = function (url, cb) {

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.addEventListener('load', function () {
    cb(xhr.response);
});
xhr.send();

};
var blobToFile = function (blob, name) {

blob.lastModifiedDate = new Date();
blob.name = name;
return blob;

};
var getFileObject = function (filePathOrUrl, cb) {

getFileBlob(filePathOrUrl, function (blob) {
    cb(blobToFile(blob, filePathOrUrl));
});

};
rows[0].data.Pics是后台返回回来的数据
格式是这种：[{"OldName":"2.jpg","SavePath":"/Upload/2.jpg"},{"OldName":"2c3a4f63&690.jpg","SavePath":"/Upload/3.jpg"}]

var picList = JSON.parse(rows[0].data.Pics);

$.each(picList, function (index, item) {

getFileObject(item.SavePath, function (fileObject) {
    var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject);
    var file = new WebUploader.File(wuFile);
    var m = { OldName: item.OldName, SavePath: item.SavePath };
    FileValue.push(m);//这里是我临时存放的数据，后面可能还会新增图片。也会加在这里面
    uploader.addFiles(file);
    $("#" + file.id).attr("jsrc", item.SavePath);//这是我添加的一个属性，可以不要
    $("#" + file.id).find(".title").html(item.OldName);//这是控件中的一个title
})

});