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

待我称王封你为后i 2021-06-26 16:06 675阅读 0赞

首先向图片转成`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)
      })
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，675人围观）

还没有评论，来说两句吧...

相关阅读

相关图片上传并映射回显

目录简介代码展示 1、配置图片保存地址 2、拦截器配置映射地址 3、接口修改地址为绝对路径 -------------------- 简介我们知道

Love The Way You Lie/ 2024年02月23日 07:20/ 0 赞/ 83 阅读

相关 Vue图片回显标签教程 - 实现图片上传和回显功能

系列文章目录 -------------------- 文章目录系列文章目录前言一、准备工作二、HTML模板三、HTML模

Love The Way You Lie/ 2023年10月14日 14:31/ 0 赞/ 75 阅读

相关 SpringBoot图片上传并回显

文章目录 1. Controller 2. 创建MyWebMvcConfigurer配置资源映射路径 3. 验证 1. Controller

╰+攻爆jí腚メ/ 2023年07月08日 06:59/ 0 赞/ 136 阅读

相关 WebUploader上传图片失真

插件地址：[http://fex.baidu.com/webuploader/doc/index.html][http_fex.baidu.com_webuploader_do

淩亂°似流年/ 2023年06月08日 06:55/ 0 赞/ 1 阅读

相关 elementUI图片上传，并实现图片回显（正式上传服务器之前就能回显）

效果图： ![在这里插入图片描述][20210304160205579.png] ![在这里插入图片描述][20210304160220708.png] 实现方法

电玩女神/ 2022年11月05日 06:30/ 0 赞/ 1475 阅读

相关图片上传服务器-回显

jar包 ![jar包][jar] 配置文件  <bean id="multipartResolver" cla

àì夳堔傛蜴生んèń/ 2022年06月06日 08:46/ 0 赞/ 315 阅读

相关跨服务器上传-图片服务器-图片回显-列表回显

jar包 ![jar包][jar] 配置文件  <bean id="multipartResolver" cla

心已赠人/ 2022年06月06日 08:46/ 0 赞/ 365 阅读

相关 HTML上传图片的回显

document.getElementById("showImg").src = window.URL.createObjectURL(personsFile.file

- 日理万妓/ 2022年05月25日 12:55/ 0 赞/ 517 阅读

相关先回显图片再上传

平时开发时可能会遇到上传图片问题，但如果是上传图片，多数是先进行上传然后才能回显，今天给大家介绍一个简单的上传前先对图片进行回显的方式，仅用一小部分js代码即可实现 js

￡神魔★判官ぃ/ 2021年12月21日 07:23/ 0 赞/ 359 阅读

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

首先向图片转成`File`类型，然后通过`addFiles`把图片添加到队列。 //初始化 var uploader = WebUploader.Upload

待我称王封你为后i/ 2021年06月26日 16:06/ 0 赞/ 676 阅读