newFileUpload.js
- 这个是外部系统：SOController下的 视图，演示了封装后的 上传组件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head
th:include="commonHeader::commonHeader(title='Sales Order Operation',cssPaths='/js/autocomplete/k-autocomplete.css')">
</head>
<body th:inline="text">
<style>
.el-align-right{
width: 40%;
text-align: right;
}
</style>
<div id="app" v-cloak>
<h3 style="width: 10%;margin: 0 auto;">新增</h3>
<div class="panel_ZH panel_ZH_M90">
<new-file-upload
ref="newFileUpload"
url="/common/api/file/upload"
@callback="callback"
:maximum="maximum"
>
</new-file-upload>
</div>
<!-- <h3 style="width: 10%;margin: 0 auto;">回显</h3>-->
<!-- <div class="panel_ZH panel_ZH_M90">-->
<!-- <new-file-upload-->
<!-- ref="newFileUpload2"-->
<!-- url="/common/api/file/upload"-->
<!-- @callback="callback"-->
<!-- :maximum="maximum2"-->
<!-- >-->
<!-- </new-file-upload>-->
<!-- </div>-->
<ul class="button_ul_other3_blue">
<li>
<a href="javascript:;" @click="view()">
<i class="fas fa-check"></i> View
</a>
</li>
<li>
<a href="javascript:;" @click="view2()">
<i class="fas fa-check"></i> View
</a>
</li>
</ul>
<!--页尾-->
<div class="footerZH_page">
<p>by 翘运国际<br>©2018 HELKA Global Logistics Limited All Rights Reserved.</p>
</div><!--footerZH_page-->
</div>
<div th:replace="commonJS :: commonJS(jsPaths='/js/autocomplete/autocomplete.js,'+'/js/uploader.js,'+'/js/upload/newFileUpload.js')"></div>
<script>
/*同一页面不能使用多个，原因在于 id=file 只能有一个*/
(function ($) {
let _this = new $({
el: '#app',
data: {
maximum: 3,
// maximum2: 3
},
mounted(){
let imgUrls = '/kpsdata/2020/7/31/58c38c1e0a3b4a86bf1bdcf67b30f292.jpg;/kpsdata/2020/7/31/54474e1f20bc4b0691eb06acb0f48994.jpg;'
this.$refs.newFileUpload2.addFile(imgUrls);
},
methods: {
callback: function(file){
console.log(file);
},
view(){
console.log(this.$refs.newFileUpload.filePath);
},
// view2(){
// console.log(this.$refs.newFileUpload2.filePath);
// }
}
});
})(Vue)
</script>
</body>
</html>
!function ($) {
(typeof VueUploadComponent !== 'undefined' && VueUploadComponent) && $.component('file-upload', VueUploadComponent);
const NEWFILEUPLOAD = {
name: 'new-file-upload',
props: {
url: {
type: String,
required: true
},
maximum: {
type: Number,
default: 1
}
},
data: function () {
return {
files: [],
token: COMMON.getCookie('tokenId'),
filePath: ''
}
},
computed: {
},
watch: {
},
created: function () {
},
mounted: function () {
},
methods: {
addFile: function (path) {
let arr = [];
arr = path.split(';');
//因为xxx；xxxx；要移除之后一个元素
arr.splice(arr.length - 1, 1);
let length = arr.length;
//控制文件数量
if(this.maximum < arr.length){
length = this.maximum;
}
for (let i = 0; i < length; i++) {
//new window.File
// 第一个参数可以为Blob对象的数组 （第一个参数必须是数组）， File对象继承自Blob，所以可以传递File对象
// 第二个参数为 要设置的文件名
// 第三个参数为可选参数， 没有后缀可能获取不到该文件类型， 所以最好设置下该值
let file = new window.File([], arr[i].substring(arr[i].lastIndexOf('/') + 1, arr[i].length)),
r = this.$refs.upload.add(file);
// this.$refs.upload.update(r, {
// success: true,
// response: {
// code: 1,
// data: [
// arr[i]
// ],
// message: 'Operate successfully',
// success: true
// }
// })
}
},
inputFilter: function (newFile, oldFile, prevent) {
if (newFile && newFile.active && oldFile && !oldFile.active) {
newFile.headers.tokenId = this.token;
}
if (newFile && !oldFile) {
// Before adding a file
// 添加文件前
// Filter system files or hide files
// 过滤系统文件 和隐藏文件
if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
return prevent()
}
// Filter php html js file
// 过滤 php html js 文件
if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
return prevent()
}
//只能上传图片
if (!/\.(jpg?|bmp?|png?|jpeg?)$/i.test(newFile.name)) {
this.message("亲,只能上传图片哟");
return prevent()
}
}
},
inputFile: function (newFile, oldFile) {
// 自动上传
if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error && !newFile.success) {
if (!this.$refs.upload.active) {
this.$refs.upload.active = true
}
}
// 更新文件
if (newFile && oldFile) {
if (newFile.success !== oldFile.success) {
if (newFile.response.code == 1) {
// 上传成功
if (newFile.response.data) {
//控制文件数量
if (this.filePath) {
this.filePath += newFile.response.data[0] + ';';
} else {
this.filePath = newFile.response.data[0] + ';';
}
this.$emit('callback',newFile);
}
} else {
// 上传失败 this.error('上传失败! 【原因】：' + newFile.response.message);
this.$refs.upload.update(newFile, {
success: false,
error: newFile.response.message,
progress: '0.00'
})
}
}
}
},
delFiles: function (file) {
let _this = this;
this.confirm('Are you sure?', function () {
if (file.success) {
// console.log(file.response.data[0]);
_this.filePath = _this.filePath.replace(file.response.data[0] + ';', '');
}
_this.$refs.upload.remove(file);
})
},
dowload: function (file) {
// if (!this.isdisabled) {
location.href = PLAT_FORM_PATH + '/file/download.do?url=' + file.response.data[0];
// }
},
},
components: {
VueUpload: VueUploadComponent
},
template: `
Upload Files
※ you can upload up to {{maximum}} files & 10M
Maxium file size is 10 M
{{file.speed |
formatSize}} {{file.progress}}%
文件上传失败
{{file.size | formatSize}}
`
};
$.component(NEWFILEUPLOAD.name, NEWFILEUPLOAD)
}(Vue)