dropzone 漫游记

今天无聊在弄一个上传供能，就随手搜了搜，发现dropzone这玩意star还挺多的，还不依赖其他组件，就直接敲定用它了。
结果发现emmm，好像不是一般的难用呢。

安装

我这里直接用cdn的方式

<script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />
<div id="app" style="min-height: 300px;">
   <p>上传</p>
</div>
let myDropzone = new Dropzone("div#myId", { url: "/file/post"});

使用

使用挺简单的初始化接直接渲染好上传区域了，只需要配置一些回调即可，但很快我就发现不对劲了，首先文档写的稀烂（我个人感觉），动不动就是请看源码。

然后找到了这两个配置项，就是上传成功的回调了

  success(file) {
   if (file.previewElement) {
     return file.previewElement.classList.add("dz-success");
   }
 },

 successmultiple() {},

 // When the upload is canceled.
 canceled(file) {
   return this.emit("error", file, this.options.dictUploadCanceled);
 },

大概是用vue一类的组件用惯了，双相绑定，以为上传会自己维护着数据，事实却是他自己内部维护了一套数据展示在前台，然后回调的数据，你需要自己处理，处理就处理吧，自己存数组里然后提交吧。

问题

首先就是上传后，移除图片这个功能点 ,可以监听事件removedfile
但是他有两种场景的删除

• 一个是上传完删除
• 一个是加载数据后删除某一项

// 这里用name 来找到要删除的图片，后面有说到
   myDropzone.on('removedfile', function (file) {
   	console.log('remove',file,myDropzone.files)
   	var removedIndex = myDropzone.files.findIndex(x=>x.name == file.name);
   	if (removedIndex !== -1) {
   	//把自己维护的数据同步删除
   		img_list.splice(removedIndex, 1);
   	}
   });

接着就是回显了，因为这个组件不只是用来上传，还要加载展示，文档有提到displayExistingFile

// callback and crossOrigin are optional
let mockFile = { name: "Filename", size: 12345 };
myDropzone.displayExistingFile(mockFile, 'https://image-url');

很快我就发现了不对劲，图片根本回显不出来，因为我只在后端存了一个url 其他什么都没有。
看控制台竟然提示跨域，后端用的云存储地址肯定跨域了

然后翻源码看到了他这个方法是支持base64的

let image = new Image();
image.src = item;
image.crossOrigin = "Anonymous";
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
	let base64 = transBase64FromImage(image);
	let mockFile = {
		// 名字放地址，这样在删除的回调里可以找到对应的数据删除掉
		name: item,
		size: 120,
		imgUrl:item,
		accepted: true
	}
	// 这里一定把要渲染的图片放进去，不然他这个组件的files是空的，你删除回调是找不到索引操作的
	myDropzone.files.push(mockFile);
	myDropzone.displayExistingFile(mockFile, base64, null, null, true);
}

function transBase64FromImage(image){
	let canvas = document.createElement("canvas");
	canvas.width = 120;
	canvas.height = 120;
	let ctx = canvas.getContext("2d");
	ctx.drawImage(image, 0, 0, 120, 120);
	// 可选其他值 image/jpeg
	return canvas.toDataURL("image/png");
}