如何用Plupload上传Base64字符串？添加File对象后遇异常求助

嘿，我来帮你拆解下这两个Plupload的问题，都是很常见的实例初始化和文件对象兼容的坑：

问题1：调用upload.addFile(fileObj)后upload.files.length始终为0 #

这个问题通常有两个核心原因：Plupload实例未完成初始化，或者转换后的File对象缺少Plupload要求的元数据。

解决思路： #

• 确保Plupload实例初始化完成再操作：Plupload的某些运行时（比如Flash/Silverlight）是异步初始化的，直接在实例创建后就调用addFile会无效。你需要监听Init事件，在回调里添加文件：

  upload.bind('Init', function(up) {
    // 在这里调用addFile
    up.addFile(yourFileObj);
    console.log(up.files.length); // 现在应该能看到正确的长度了
  });
  

• 给转换后的File对象补全必要属性：Plupload的文件对象需要name、type、size这些属性，你的Base64转File过程里可能没加。正确的转换代码应该是这样：

  function dataURLToFile(dataURL, filename = 'canvas-image.png') {
    const [metaPart, dataPart] = dataURL.split(',');
    const mime = metaPart.match(/:(.*?);/)[1];
    const byteString = atob(dataPart);
    const uint8Array = new Uint8Array(byteString.length);
    
    for (let i = 0; i < byteString.length; i++) {
      uint8Array[i] = byteString.charCodeAt(i);
    }
    
    // 必须传入文件名和MIME类型，Plupload依赖这些判断文件合法性
    return new File([uint8Array], filename, { type: mime });
  }
  

• 检查Plupload实例是否正确创建：确认你已经调用了upload.init()，而且初始化参数里指定了支持的runtimes（比如html5是必须的，因为你用的是Canvas生成的文件）。

问题2：调用upload.setOption({url:'xxx'})抛出‘url of null’错误 #

这个报错的本质是你的upload实例本身是null或者未正确初始化，导致调用setOption时访问了null的属性。

解决思路： #

• 先确保实例正确初始化：创建Plupload实例时必须传入基础配置，并且调用init()：

  // 正确的实例创建流程
  var upload = new plupload.Uploader({
    runtimes: 'html5',
    browse_button: 'your-button-id', // 即使你不用选择按钮，这个参数也不能少（某些版本的Plupload要求）
    url: 'default-upload-url' // 初始化时先给个默认值，后续再修改
  });
  
  upload.init();
  

• 在Init事件回调里修改url：和添加文件一样，修改配置也要等实例初始化完成后：

  upload.bind('Init', function(up) {
    up.setOption('url', 'your-target-url');
  });
  

• 加个实例存在性检查：如果是动态创建的实例，调用前先确认它存在：

  if (upload && upload instanceof plupload.Uploader) {
    upload.setOption('url', 'xxx');
  }
  

你的代码片段参考： #

相关代码如下：
var cans = document.getElementById('cans');
var ctx = cans.getContext("2d");
var img = document.getElementById('img');
img.onload = function () {
ctx.drawImage(img, 10, 10, 100, 100);
var dataURL = cans.toData...

内容的提问来源于stack exchange，提问作者chad zha