vue-simple-uploader 上传文件并预览

上传大文件照片,需要支持文件夹上传、分片上传、断点续传,因此选择vue-simple-uploader 插件。

需求:上传完后还需要通过查看详情,预览上传的照片,网上找了半天,也没发现相关文档,后来打印上传文件列表发现,fileList数组中file类型为File,想着FileReader应该可以将其转为base64位,实现预览,因此试了试没想到成功了。
vue-simple-uploader 上传文件并预览_第1张图片

files.fileList.forEach(item => {
          if (!item.isFolder) {
            const reader = new FileReader();
            // reader里面有个方法readAsDataURL 可以将图片转base64进制
            reader.readAsDataURL(item.file);
            // onload可以监听转换完成后
            reader.onload = () => {
              //imgUrl 即为转换成功后的base64图片地址
              item.imgUrl = reader.result;
            };
          }
        });

你可能感兴趣的:(vue项目,javascript,前端,vue.js,前端,javascript)