附件部分的上传,下载,查看,编辑等
注:在微信端和钉钉端,只支持部分文件格式的查看和下载
微信端和钉钉端支持的文件格式有:word,excel,ppt,pptx,pdf,html,png,bmp,jpg,jpeg,gif,doc,docx,xls,xlsx

方法

download

download
(
  • options
)

附件下载

参数:

名称类型标识描述
options Object 必选

配置参数

名称类型标识描述
url String 必选

附件的下载地址(默认:"")

[title] String 可选

在下载进度中的显示名称(默认:"")

[extData] Object 可选

额外参数,用于优化方面的需求的配置(目前可以配置的是文件本地缓存,避免同一个文件重复被下载)

名称类型标识描述
[fileId] String 可选
用于本地缓存的附件唯一ID
[lastModified] String 可选
用于本地缓存的附件唯一更新时间
[origin] String 可选
用于本地缓存的附件唯一的服务器地址,如:http://10.5.6.7:8080
[isSaveToLocal] Boolean 可选

文件是否保存到本地离线文件中

[success] Function 可选

下载成功后的回调,附件成功下载到本地后的文件地址,文件名称,文件大小等信息返回

[error] Function 可选

下载错误的回调

[progress] Function 可选

下载进度的回调

示例:

文件导入路径:
M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端:
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-att.js"></script>
 =========================================================================================
 调用组件
<script>
    cmp.att.download({
         url:cmp.seeyonbasepath + "/rest/attachment/file/232323232",
         title:"下载的文件名.png",
         extData:{
              fileId:"xxxxxdd",   //必须是字符串
              lastModified:"63hgsjas",//必须是字符串
              origin: cmp.origin
         },
         isSaveToLocal:true,
         progress:function(result){
             //do something with progress result
         },
         success:function(result){
             //返回的数据格式如下:
             result = {
                 url:"/storage/emulated/0/Tencent/QQfile_recv/QQDataLineGuidePic.png"//下载成功后文件保存到手机端地址,一般使用这个地址进行文件的显示、打开用
                 filename:"保存到手机端的文件名称.doc",
                 size:"4336216"//文件大小,单位byte
             }
                 ....
         }
         error:function(error){
             //do something with error obj
         }
    });
</script>

getDownLoadListInfo

getDownLoadListInfo
(
  • [options]
)

获取下载列表信息

参数:

名称类型标识描述
[options] Object 可选

配置参数

名称类型标识描述
[success] Function 可选

成功回调

[error] Function 可选

失败回调

getFileInfo

getFileInfo
(
  • [options]
)

根据路径读取文件信息

参数:

名称类型标识描述
[options] Object 可选

配置参数

名称类型标识描述
filepath Array 必选

可以传多个文件路径,返回的信息对应到相应的文件上

[success] Function 可选

成功回调

[error] Function 可选

失败回调

getOfflineFiles

getOfflineFiles
(
  • options
)

获取本地离线文件

参数:

名称类型标识描述
options Object 必选

配置参数

名称类型标识描述
[success] Function 可选

成功回调

[error] Function 可选

失败回调

示例:

文件导入路径:
 M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端:6.1sp2版本及以后的版本才支持微信端文件上传
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-att.js"></script>
 =========================================================================================
 调用组件
<script>
    cmp.att.getOfflineFiles({
         success:function(result){
             //返回的数据格式如下:
             result = {
                 files:[{  //是一个数组
                     filepath:"/storage/emulated/0/Tencent/qq.doc"//文件在手机端的路径,
                     fileSize:"1222222",//文件大小,单位byte
                     fileData:"文件二进制数据",//微协同才会返回此参数
                 }]
             }
         }
         error:function(error){
             //do something
         }
    });
</script>

getUploadListInfo

getUploadListInfo
(
  • [options]
)

获取上传列表信息

参数:

名称类型标识描述
[options] Object 可选

配置参数

名称类型标识描述
[success] Function 可选

成功回调

[error] Function 可选

失败回调

init

init
(
  • selector
  • [atts]
  • [docs]
  • [options]
  • [options:callback]
)

V5附件类(直接渲染已经存在的附件)

参数:

名称类型标识描述
selector String 必选

容器选择器,定义于页面装载附件对象的容器

[atts] Object 可选

//附件数据

[docs] Object 可选
[options] Object 可选

附件操作配置参数

名称类型标识描述
[isShowDelete] Boolean 可选

是否显示删除按钮,删除按钮会绑定开发者自定义的删除事件,默认:true

[isDefault] Boolean 可选

是否显示默认的附件样式

[delCallback] Function 可选

删除附件的回调

[options:callback] Function 可选

关联文档协同查看走开发者自定义的回调函数

示例:

文件导入路径:
M3App端
 <link rel="stylesheet" href="http://cmp/v/css/cmp.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-listView.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-picker.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-search.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-accDoc.css"></link>
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-audio.js"></script>
 <script  src="http://cmp/v/js/cmp-camera.js"></script>
 <script  src="http://cmp/v/js/cmp-listView.js"></script>
 <script  src="http://cmp/v/js/cmp-imgCache.js"></script>
 <script  src="http://cmp/v/js/cmp-picker.js"></script>
 <script  src="http://cmp/v/js/cmp-dtPicker.js"></script>
 <script  src="http://cmp/v/js/cmp-search.js"></script>
 <script  src="http://cmp/v/js/cmp-accDoc.js"></script>
 <script  src="http://cmp/v/js/cmp-v5.js"></script>
 ===========================================================================================
 微协同端:
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp.css"/>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-listView.css"/>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-accDoc.css"/>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-search.css"></link>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-accDoc.css"></link>
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-listView.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-audio.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-camera.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-imgCache.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-picker.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-dtPicker.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-search.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-accDoc.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-v5.js"></script>
 =========================================================================================
 调用组件
<script>
    cmp.att.init(
       selector:"#attsArea",
       atts://v5附件对象数据
       docs://v5文档对象数据
       {
          callback:function seeDoc(docData){
          },
          isShowDelete:true,
          isDefault:true,
          delCallback:function(data){
             //data:将要被删除的附件数据,回调给开发者,开发者自行操作
          }
       }
    );
</script>

initUpload

initUpload
(
  • selector
  • options
)
AttUpload

专门为V5封装的一套附件上传,下载,查看和关联文档的组件

参数:

名称类型标识描述
selector String 必选

组件显示的容器

options Object 必选

配置参数

名称类型标识描述
[showAuth] Number 可选

附件按钮显示权限

  • 1:只显示附件(包括:【拍照】、【语音】、【本地文件】、【本地图片】
  • 2:只显示【关联文档】
  • 3:只显示【新建文件夹】
  • 4:显示【新建文件夹】+【拍照】+【本地文件】+【本地图片】
  • -1:除了【新建文件夹】不显示,其他都显示

[initData] Object 可选

初始附件数据

[initDocData] Object 可选

初始关联文档数据

[clearCache] Object 可选

是否清空已选数据的缓存(默认为false,设置成true,当点击返回按钮的时候,已选数据被清空,避免弹出附件列表层)

[callback] Function 可选

选择数据后的回调

[createFolderCallback] Function 可选

创建文件夹的回调调用开发者提供的接口

[delCallback] Function 可选

删除数据的回调

返回值:

AttUpload:

示例:

文件导入路径:
 M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端:
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-att.js"></script>
 =========================================================================================
 调用组件
<script>
    cmp.att.initUpload("showAreaID",{
         showAuth:-1, //按钮显示权限
         initData:null, //初始附件数据
         initDocData:null, //初始关联文档数据
         createFolderCallback:function(){
              //调用开发者创建文件夹的接口
         },
         callback:function(result){ //选择成功后的回调
             //do something
         },
         delCallback:function(result){ //删除数据时的回调
             //do something
         }
    });
</script>

officeEdit

officeEdit
(
  • options
)

office文件编辑

参数:

名称类型标识描述
options Object 必选

配置参数

名称类型标识描述
[path] Function 可选

文件地址

[filename] Function 可选

文件名称

[uploadPath] Function 可选

上传到服务器的地址

[callback] Function 可选

回调函数

示例:

文件导入路径:
 M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端:不支持
 =========================================================================================
 调用组件
<script>
    cmp.att.officeEdit({
             path:"",
             filename:"",
             uploadPath:"",
         callback:function(){
             //do something
         }
    });
</script>

openOfflineFilesModule

openOfflineFilesModule
(
  • options
)

打开离线文档模块

参数:

名称类型标识描述
options Object 必选

配置参数

名称类型标识描述
[success] Function 可选

成功回调

[error] Function 可选

失败回调

示例:

文件导入路径:
 M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端:不支持
 =========================================================================================
 调用组件
<script>
    cmp.att.openOfflineFilesModule({
         success:function(result){
             //do something
         }
         error:function(error){
             //do something
         }
    });
</script>

read

read
(
  • options
)

查看附件内容,包括pdf,excel,word,jpeg...
如果是图片,则打开图片查看器,如果是其他文件(office、txt)
Android手机跳转到相应的app或下载对应的app来打开
IOS手机打开对应的app或跳转到appStore去下载

参数:

名称类型标识描述
options Object 必选

附件查看配置参数

名称类型标识描述
path String 必选

附件查看的地址,可以是远程地址或者本地地址

filename String 必选

附件名称

[edit] Boolean 可选

是否可以进行编辑,默认:false(注:目前只支持office文档文件的修改编辑,且只能通过wps软件进行修改)

[extData] Object 可选

额外参数,用于优化方面的需求的配置(目前可以配置的是文件本地缓存,避免同一个文件重复被下载)

名称类型标识描述
[fileId] String 可选
用于本地缓存的附件唯一ID
[lastModified] String 可选
用于本地缓存的附件唯一更新时间
[origin] String 可选
用于本地缓存的附件唯一的服务器地址,如:http://10.5.6.7:8080
[editable] Boolean 可选
是否可编译(7.0新增)
[autoSave] Boolean 可选
是否自动保存到离线文档(7.0新增)
[autoOpen] Boolean 可选
是否自动打开(7.0新增)
[openFile] Boolean 可选

是否打开文件(7.0新增)

[headers] Object 可选

文件下载头(7.0新增)

[localPath] String 可选

文件本地路径(7.0新增)

[fileId] String 可选

文件唯一标识(7.0新增)

[type] String 可选

文件类型(7.0新增)

[size] Number 可选
[success] Function 可选

成功回调

[error] Function 可选

失败回调

示例:

文件导入路径:
 M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-att.js"></script>
 =========================================================================================
 调用组件
<script>
    cmp.att.read({
         path:cmp.seeyonbasepath + "/rest/attachment/file/232323232",//文件的服务器地址
         filename:"文件名.doc",//附件名称
         edit:false,  //是否可以进行修改编辑
         extData:{
              fileId:id,//必须是字符串
              lastModified:lastModified,//必须是字符串
              origin: cmp.origin
         }
         success:function(result){
             //返回的数据格式如下:
             result = "/storage/emulated/0/m3/files/图片.jpeg";

         }
         error:function(error){
             //do something
         }
    });
</script>

saveBase64

saveBase64
(
  • options
)

保存base64数据到本地

参数:

名称类型标识描述
options Object 必选

配置参数

名称类型标识描述
base64 String 必选

base64数据

filename String 必选

保存成文件的名称

type String 必选

保存成文件的类型

[success] Function 可选

保存成功回调

[error] Function 可选

保存失败回调

示例:

<script>
    cmp.att.saveBase64({
         base64:"",
         filename:"",//附件名称
         type:"png",
         success:function(result){
             //do something
         }
         error:function(error){
             //do something
         }
    });
</script>

suite

suite
(
  • options
)

附件组件套件(不涉及到ue)
此组件封装了选择文件和上传文件到A8服务器的两个操作

参数:

名称类型标识描述
options Object 必选

配置参数

名称类型标识描述
type String 必选

调用的类型:

  • “photo”:照相
  • “picture”:本地图片
  • “accDoc”:关联文档
  • “voice”:录音
  • “localFile”:本地文件

[initDocData] String 可选

如果type是"accDoc",有初始关联文档值的话,需要传初始关联文档值

[success] Function 可选

成功回调

[error] Function 可选

失败回调

[cancel] Function 可选

取消回调,照相、选相册、选本地文件的取消回调

[maxFileSize] Number 可选

图片,附件选择的最大大小限制,默认是3X1024X1024(即3M)

[pictureNum] Number 可选

用于控制是否多选图片,默认是1,最多是9

示例:

文件导入路径:
M3App端
 <link rel="stylesheet" href="http://cmp/v/css/cmp.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-listView.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-picker.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-search.css"></link>
 <link rel="stylesheet" href="http://cmp/v/css/cmp-accDoc.css"></link>
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-audio.js"></script>
 <script  src="http://cmp/v/js/cmp-camera.js"></script>
 <script  src="http://cmp/v/js/cmp-listView.js"></script>
 <script  src="http://cmp/v/js/cmp-imgCache.js"></script>
 <script  src="http://cmp/v/js/cmp-picker.js"></script>
 <script  src="http://cmp/v/js/cmp-dtPicker.js"></script>
 <script  src="http://cmp/v/js/cmp-search.js"></script>
 <script  src="http://cmp/v/js/cmp-accDoc.js"></script>
 <script  src="http://cmp/v/js/cmp-v5.js"></script>
 ===========================================================================================
 微协同端:
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp.css"/>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-listView.css"/>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-accDoc.css"/>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-search.css"></link>
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-accDoc.css"></link>
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-listView.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-audio.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-camera.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-imgCache.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-picker.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-dtPicker.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-search.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-accDoc.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-v5.js"></script>
 =========================================================================================
 调用组件
<script>
    cmp.att.suite({
         type:"photo",
          pictureNum:9,
         initDocData:null, //初始关联文档数据
         maxFileSize:5*1024*1024,
         success:function(result){ //选择成功后的回调
             //返回的是A8服务器端的数据格式,请使用chrome远程调试手机的方式在浏览器控制面板查看返回的数据格式
             //如果是【本地图片】类型的情况,文件每上传成功一次就会回调此函数一次
         },
         error:function(result){ //删除数据时的回调
             //do something
         },
         cancel:function(result){//选图片,拍照,录音、本地文件取消选择时的回调
            //do something
         }
    });
</script>

upload

upload
(
  • options
)

附件上传(支持多文件上传)

参数:

名称类型标识描述
options Object 必选

附件上传配置参数

名称类型标识描述
url String 必选

附件提交到服务器的地址

fileList Array 必选

本地附件资源的路径集,其中单个file对象的格式为
{filepath:"文件路径",fileId:"文件唯一id"}
如果是微信端上传,需要传文件的二进制数据(即html file控件的二进制数据),如:
{filepath:"文件路径",fileId:"文件唯一id",fileData:file}

[extData] String 可选

扩展到业务数据,如对象ID,业务类型等,用JSon字符串转码后提交到服务器

[imgIndex] String 可选

多张文件上传的时候服务器端认证的顺序关键字段,默认sortNum

[progress] Function 可选

上传进度回调,未完全上传完时,打包的文件会不停地回调此函数,每次回调都会返回fileId,告诉开发者对应的是哪个文件的进度条

[success] Function 可选

上传成功回调,此成功回调是每上传一个文件成功就会回调一次,比如,打包上传3个文件,如果3个文件都上传成功则回调3次,每次上传成功都会返回对应的fileId

[error] Function 可选

上传失败回调,此失败回调是上传将上传失败的文件进行回调,失败的数据都会返回fileId,告诉开发者哪个文件上传失败了

示例:

文件导入路径:
 M3App端
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-att.js"></script>
 ===========================================================================================
 微协同端:6.1sp2版本及以后的版本才支持微信端文件上传
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-att.js"></script>
 =========================================================================================
 调用组件
<script>
    //M3壳中上传
    cmp.att.upload({
         url:cmp.seeyonbasepath+"//rest/attachment?token=" + cmp.token,  //附件上传的服务器地址
         fileList:[{
             filepath:"file:///storage/emulated/0/Tencent/QQfile_recv/手机端文件.png",
             fileId:"12344333",
             fileData:"0x48, 0x54, 0x54, 0x50, 0x2F, 0x31, 0x2E, 0x31, 0x20, 0x34,"//微协同才传此值
         }],//需要上传的附件列表
         title:"",  //上传进度显示名称
         extData:"",
         progress:function(result){
             //返回的数据格式如下:
             result = {
                pos:0.456, //0~1的小数,即上传进度的百分比
                fileId:"12344333"//fileId对应开发者传的某一个的fileId
             }
         },
         success:function(result){  //服务器端返回的相应数据
             //返回的数据格式如下:
             result = {
                fileId:"12344333",//fileId对应开发者传的某一个的fileId
                response:{},//服务器端的响应数据-----请在浏览器控制面板查看其数据格式
                pos:1//上传进度为1,代表完成了上传 
             }
         }
         error:function(error){
             //do something
         }
    });

        //支持微信端的附件上传
        var fileData;
        cmp.att.getFile4Html({  //调用组件获取file控件的二进制数据
            success:function(result){
               var files = result.files;
               var fileSize = files[0].fileSize;//取出file的大小
               var filepath = files[0].filepath;//取出file的路径(由于浏览器的安全机制,此路径只是file的名字)
               var type = files[0].type;//取出file的类型
               fileData = files[0].fileData//取出file的二进制数据
            }
        });

        cmp.att.upload({
         url:"cmp.seeyonbasepath+"//rest/attachment?token=" + cmp.token",  //附件上传的服务器地址
         fileList:[{filepath:"test.png",fileId:"xxxx",fileData:fileData}],//需要上传file二进制数据
         title:"",  //上传进度显示名称
         extData:"",
         progress:function(result){
             //返回的数据格式如下:
             result = {
                pos:0.456, //0~1的小数,即上传进度的百分比
                fileId:"12344333"//fileId对应开发者传的某一个的fileId
             }
         },
         success:function(result){  //服务器端返回的相应数据
             //返回的数据格式如下:
             result = {
                fileId:"12344333",//fileId对应开发者传的某一个的fileId
                response:{},//服务器端的响应数据-----请在浏览器控制面板查看其数据格式
                pos:1//上传进度为1,代表完成了上传
             }
         }
         error:function(error){
             //do something
         }
    });
</script>
Top