如何替换attachmentsimple对象？

ufo1982ufo · 发表于 2017-4-28 13:04:03

本帖最后由 ufo1982ufo 于 2017-4-28 13:05 编辑

微信截图_20170428125414.png

按照教程在attachmentsimple中获取到上传文件的base64编码：
if (window.FileReader) {
                     var reader = new FileReader();
                     reader.readAsDataURL(file);
                     // 监听文件读取结束后事件
                     reader.onloadend = function(e) {
                        var base64String = e.target.result; // e.target.result就是最后的路径地址
                        console.log(base64String);
                     };
                  }

由于安卓微信中attachmentsimple无法压缩图片，基于canvas对图像进行了压缩绘制，得到的也是base64编码：
                                                         ctx.drawImage(Img, 0, 0, Img.width, Img.height, 0, 0, canvas.width, canvas.height);
                                                         canvas.toDataURL('image/jpeg', quality);
                                                         var dataUrl = canvas.toDataURL('image/jpeg', quality);
                                                         var img3 = document.getElementById('image3');
                                                         img3.src = dataUrl;

attachmentsimple始终设置了不自动上传，我想用我绘制的经过压缩的图像替代event.file的文件，如何处理？

liangyongfei · 发表于 2017-4-28 14:05:19

你F12 看下源码吧！
attachmentSimple 组件源码中
<div data-bind="foreach

attachmentItems"

这个下面的第二个节点 div 下面动态生成的背景图片！

<div class="x-attachment-item x-item-other" data-bind="click:$model.previewOrRemoveItem.bind($model),style:{backgroundImage:($model.previewPicture.bind($model,$object))()}" xid="div10">

复制代码

你可以修改源码。将
$model.previewPicture.bind($model,$object))() 换成自己的一个KO 对象！然后把背景图片给他赋值即可！

就能显示你的图片了！

ufo1982ufo · 发表于 2017-4-28 14:37:39

liangyongfei 发表于 2017-4-28 14:05
你F12 看下源码吧！
attachmentSimple 组件源码中

先定义KO对象，再在这里换成KO对象，然后用canvas绘缩略图，再将 canvas.toDataURL('image/jpeg', quality)赋值给KO，再submit。
用户重新删除重传会不会有影响？是这个思路嘛？

liangyongfei · 发表于 2017-4-28 15:02:32

ufo1982ufo 发表于 2017-4-28 14:37
先定义KO对象，再在这里换成KO对象，然后用canvas绘缩略图，再将 canvas.toDataURL('image/jpeg', quali ...

也不行！这个绑定是需要执行上传以后才能生成的！ｄａｔａ组件中的值也是上传才生成的！
如果想显示预览！只能自己在这个ｄｉｖ下　动态生成ｄｏｍ节点实现了！！

执行上传的时候！再把你的ｄｏｍ节点删除！使用系统自动生成的缩略图实现了！

如果想上传后也自己生成缩略图！那就修改这里！！变成你自定义的ＫＯ对象！（因为是多张图片！建议定义一个普通的ｄａｔａ组件实现！）

ufo1982ufo · 发表于 2017-4-28 15:26:23

liangyongfei 发表于 2017-4-28 15:02
也不行！这个绑定是需要执行上传以后才能生成的！ｄａｔａ组件中的值也是上传才生成的！
如果想显示预览 ...

主要不是修改预览的值，而是想对那个event.file的文件直接改成我用canvas绘制的！如果只修改预览值的话上传的文件还是大文件！

liangyongfei · 发表于 2017-4-28 15:30:49

ufo1982ufo 发表于 2017-4-28 15:26
主要不是修改预览的值，而是想对那个event.file的文件直接改成我用canvas绘制的！如果只修改预览值的话上 ...

那个event.file 就是真正的大文件！！
我们的预览也是使用的这个文件！你看他是通过调用后端的请求获取图片的！（就是一个输出流）

你不能修改event.file 需要做的是自己动态创建dom节点实现它吧

ufo1982ufo · 发表于 2017-4-28 16:20:37

liangyongfei 发表于 2017-4-28 15:30
那个event.file 就是真正的大文件！！
我们的预览也是使用的这个文件！你看他是通过调用后端的请求获取图 ...

我的那个img3也可以改成动态创建，问题是我创建后希望那个attachmentsimple（或者说uploader）就使用我创建的对象，然后后面还是交给attachmentsimple的逻辑来处理！否则还是用的大文件就没有意义了！

liangyongfei · 发表于 2017-4-28 16:56:17

1.具体如何替换，还需要看源码！
你看下 /UI2/system/components/justep/uploader/uploader-html5.js 中的submit 方法
里面调用的self.doUpload(data.file); 就是文件对象！
你可以修改它的代码！将file对象传递进去！

或者试试
this.comp('attachmentSimple组件Xid').uploader.inputElement.files
换成你的文件对象！

这是一个数组！你把里面的对象删除！把自己的文件对象加进去就行了！

ufo1982ufo · 发表于 2017-5-2 14:40:47

liangyongfei 发表于 2017-4-28 16:56
1.具体如何替换，还需要看源码！
你看下 /UI2/system/components/justep/uploader/uploader-html5.js 中的 ...

搞了好几回都没有搞定，于是专门针对微信用：justep.Browser.isWeChat判断修改。1、attachmentsimple在微信里点击预览的功能禁用，找到“\model\UI2\system\components\justep\attachment\attachmentSimple.js”修改previewOrRemoveItem 如下：

previewOrRemoveItem : function($object){
var realFileName = $object.realFileName.get();
var storeFileName = $object.storeFileName.get();
var ownerID = this.getOwnerID($object);
if(this.$state.get() == 'upload'){
if(!justep.Browser.isWeChat){
this.downloadFile(realFileName,storeFileName,ownerID);
}
}else if(this.$state.get() == 'remove'){
this.deleteFile(storeFileName,ownerID);
}
},

复制代码

2、然后把缩略图的？图标修改成已经上传的图片预览，还是这个文件，找到：getPictureUrl修改后运行dist：

getPictureUrl : function($object){
var realFileName = encodeURIComponent($object.realFileName.get());
var storeFileName = $object.storeFileName.get();
var ownerID = this.getOwnerID($object);
var operateType = "browse";
var imgFileType = ".jpg,.jpeg,.jpe,.png,.gif,.tiff,.tif,.svg,.svgz,.svg";
var url = "";
if(imgFileType.indexOf((String(/\.[^\.]+$/.exec(realFileName)).toLowerCase())) >= 0){
url = this.getFileUrl(realFileName,storeFileName,ownerID,operateType);

复制代码

3、由于上次图片真实name不对，带有%之类的符号（http://xxx.com/baas/mfxxl/attach ... 05-02&realFileName=image%253A263173&operateType=browse&from=singlemessage）。于是自己显示缩略图，新建一个image，增加“id=image3”并使用canvas绘制大的缩略图并显示：

if(justep.Browser.isWeChat){
var Img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var maxWidth = 800;
var maxHeight = 800;
var quality = 0.85;
Img.onload = function() {
if (Img.width>maxWidth || Img.height>maxHeight) {
var bili = Math.max(Img.width/maxWidth, Img.height/maxHeight);
canvas.width = Img.width/bili;
canvas.height = Img.height/bili;
}else{
canvas.width = Img.width;
canvas.height = Img.height;
}
ctx.drawImage(Img, 0, 0, Img.width, Img.height, 0, 0, canvas.width, canvas.height);
canvas.toDataURL('image/jpeg', quality);
var dataUrl = canvas.toDataURL('image/jpeg', quality);
console.log(dataUrl);
var img3 = document.getElementById('image3');
img3.src = dataUrl;
uploader.submit();
};
Img.src = _URL.createObjectURL(file);
}

复制代码

目前只有这样，等新版本发布后再改回来啦！
谢谢梁老师的指导，可以结贴！

chuvenus · 发表于 2018-8-6 14:14:47

没看懂怎么改。。。

		自动登录	找回密码
密码			注册

[结贴] 如何替换attachmentsimple对象？