在Odoo中实现文件上传

首先我们需要在qweb页面中加入上传的xml


附件 
 选择上传附件

# css部分

/*上传文件按钮*/
.uploader_input{width: 120px;}
.uploader-file-input{display: none;
}
/*上传文件展示位置*/
.uploader_file_box{display: flex;
}
.uploader__file-list__item{padding:0 1rem;display: flex;background-color: #dfdfdf;margin-right: 10px;
}
.btn-white-up{background-color: #fff;border: 1px dashed #cccccc ;
}
.uploader__file-list__text{max-width: 100px;padding-right: 10px;display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.uploader__file-list__text:hover{color: #478aee;
}
.js-upload-remove-button{cursor: pointer;

在完成css部分后，我们在项目的页面上会得到一个这样的上传组件 ⬇

# js部分上传的事件及监听

点击选择上传附件后，会调用默认的input的上传功能，并给输入框监听change事件，拿到上传的文件。

this.$buttons.find('#fileinput').on('change', this.proxy("selectFile")) //读取上传的文件

# 开始上传文件start

//当前页面全局定义的
var fileOption={fileTypeWhiteList: [ 'ppt','pptx', 'xls','xlsx','pdf','doc','docx'],//校验的格式
}
var fileState = {fileBatch:[],fileListIndex:0
}
var upfilelength=0;//文件上传 start
// 获取文件
selectFile:function (e){e.preventDefault();e.stopPropagation();//这里可以加一个校验var files = e.target.files || e.dataTransfer.files || e.dataTransfer.getData;for (var i = 0; i < files.length; i++) {Self.addfile(files[i]);}},
//上传文件
addfile:function (file){let self = this;var fileSize = file.size;//判断文件大小if( parseInt(fileSize/1024/1024)>=20){this.displayNotification({title: "系统提示",message: '单个文件上传不能超过20MB',type: 'danger',sticky: false});return}var upfiles = file;if (fileOption.fileTypeWhiteList.indexOf((this.getExtension(file.name)).toLowerCase()) !== -1) {framework.blockUI()//调用loading....//调用接口并在上次完成后调用查询接口查询到上传了的文件self.getUpdataList();})} else {// 不在提示文件不可上传let mesg = '不支持该格式的文件,请上传以下格式的文件ppt,pptx,xls,xlsx,pdf,doc,docx;'Self.displayNotification({title: "系统提示",message: mesg,type: 'danger',sticky: false});return}},
//反显上传的数据
//我这里是调用接口去查询上传后的数据
getUpdataList:function (){let self = this;//先清除后加$('#fileinput').val('');$('.uploader_file_box').children().remove();this._rpc({route: 'xxxxxxx',params:{xxxx:xxxxx,}}).then(res=>{var upfileList = res.data;if(upfileList.length>0){approveFileFlag = false;upfilelength = upfileList.length;for (let i = 0; i '+ ''+fileName+'' +'');//文件名称fileState.fileListIndex++;//创建一个放入的var listItem = $('
');//文件展示的每一条的盒子var removeLink = $('');fileState.fileBatch.push({filesdow: filesdow, id: fileId, fileName: fileName,});//保存文件//校验是否需要删除，校验部分，根据自己的需求，自己去调整if(quot_status==0&&(!approve_type)){listItem.append(fileNameWrapper).append(removeLink);}else {listItem.append(fileNameWrapper);}$('.uploader_file_box').append(listItem);this.bindEvents();
},
//挂载事件的方法因为解决查询多次已上传文件时删除文件事件的触发问题
bindEvents:function (){//先集体移然后集体添加$('.js-upload-remove-button').unbind("click");//在集体添加事件$('.js-upload-remove-button').on('click',this.removeItemHandler);},
//删除已上传的文件，待确认
removeItemHandler:function (e){let self = this;e.preventDefault();var removeIndex = $(e.target).data('index');Dialog.confirm(self, '确定删除？', {title: '提示',confirm_callback: function () {Self.removeItem(removeIndex);$(e.target).parent().parent().remove();},})},
//删除上传的数据
removeItem(id){let self = this;let removId = id;this._rpc({route: '/xxxx/xxxxdel',params:{xxxid：xxxx}}).then(res=>{self.displayNotification({title: "系统提示",message: res['msg'],type: 'success',sticky: false});self.getUpdataList();//删了后要查询并反显数据})//这部分是做多数据一次上传需要我这边没用到for (var i = 0; i < fileState.fileBatch.length; i++) {if (fileState.fileBatch[i].id === parseInt(id)) {fileState.fileBatch.splice(i, 1);break;}}
},
//规则校验
getExtension:function(path){var basename = path.split(/[\\/]/).pop();var pos = basename.lastIndexOf('.');if (basename === '' || pos < 1) {return '';}return basename.slice(pos + 1);
},
//文件上传end

完成文件上传后，接下来就是重头部分——文件的预览。

文件预览分为两种情况，在Odoo中，其实PDF的文件是可以直接预览的，而Excel、Word、txt等文件格式则不行，那么如何解决这个问题呢？

在Odoo中实现不同文件预览

# 引入对应的js组件

预览文件，需要使用到外部的js相关组件库：

https://officetohtml.js.org/ 组件方案来源

能够开源的，目前只支持docx和xlsx等相关原生Office的预览功能，我们可以去官网的GitHub 上下载。

在这里，我们需要在引入文件的地方引入对应的js部分 ⬇

对应的文件直接放到对应的js文件目录下即可。

需要注意的是，这个步骤需要在上面执行上传的js的前面进行置入，接下来就是点击文件后预览文件了。

# PDF、txt等文件预览的样式

这里预览的盒子css的样式就不写了，因为根据每个人的情况不同，所需的预览方式也不同。

下面分享的样式，修改了上面盒子点击事件后的js部分代码，因为我需要的是下载文件，用户在本地预览，所以增加的是a标签。

在实际应用中，可以去掉改写方法。

//挂载事件的方法
bindEvents:function (){//先集体移然后集体添加$('.js-upload-remove-button').unbind("click");//在集体添加事件$('.js-upload-remove-button').on('click',this.removeItemHandler);//添加文件的点击事件$('.uploader__file-list__text').unbind("click");$('.uploader__file-list__text').on('click',this.previewsShow)
},
// 预览
previewsShow:function (){// 点击时先获取是那个文件,并找到对应文件的url地址，var file_path = "path/to/file.pptx";// 先清除$('.body').remove('#resolte-contaniner')//在添加，或者可以先写到上面的xml中这样就不需要创建let previewbox = `
`$('.body').append(previewbox);//读取远程文件对象时//可以预设不同文件的不同清空的预设$("#resolte-contaniner").officeToHtml({url: file_path,inputObjId: "select_file",pdfSetting: {setLang: "he",thumbnailViewBtn: true,searchBtn: true,nextPreviousBtn: true,pageNumberTxt: true,totalPagesLabel: true,zoomBtns: true,scaleSelector: true,presantationModeBtn: true,openFileBtn: true,printBtn: true,downloadBtn: true,bookmarkBtn: true,secondaryToolbarBtn: true,firstPageBtn: true,lastPageBtn: true,pageRotateCwBtn: true,pageRotateCcwBtn: true,cursorSelectTextToolbarBtn: true,cursorHandToolbarBtn: true}});},

如：Execl预览后，图片如下⬇