Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 b3f802ec 编写于 作者: Shine-zwj's avatar Shine-zwj
浏览文件
操作

磁盘组件国际化

上级 e49f4356
隐藏空白字符变更
内嵌 并排
正在显示 包含 532 行增加 和 360 行删除
src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @ b3f802ec
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
drag drag
multiple multiple
list-type="text" list-type="text"
:action="getAction" :action="getAction()"
:headers="myHeaders" :headers="myHeaders"
:file-list="uploadFileList" :file-list="uploadFileList"
:show-file-list="false" :show-file-list="false"
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
<div> <div>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div> <div>
<span>将文件拖到此处，或</span> <span>{{$t('components.diskFileUpload.fileDrag')}}</span>
<span style="color:#409EFF;">点击上传</span> <span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span>
</div> </div>
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div> <div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
</div> </div>
...@@ -30,13 +30,13 @@ ...@@ -30,13 +30,13 @@
ref="upload" ref="upload"
multiple multiple
list-type="text" list-type="text"
:action="getAction" :action="getAction()"
:headers="myHeaders" :headers="myHeaders"
:file-list="uploadFileList" :file-list="uploadFileList"
:show-file-list="false" :show-file-list="false"
:limit="limit" :limit="limit"
:http-request="customUploadFile"> :http-request="customUploadFile">
<el-button type="primary" size="small" icon="el-icon-upload">点击上传</el-button> <el-button type="primary" size="small" icon="el-icon-upload">{{$t('components.diskFileUpload.clickUpload')}}</el-button>
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div> <div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
</el-upload> </el-upload>
</el-col> </el-col>
...@@ -47,158 +47,256 @@ ...@@ -47,158 +47,256 @@
<span>{{item.name}}</span> <span>{{item.name}}</span>
</div> </div>
<div class="fileMain"> <div class="fileMain">
<el-link type="success" icon="el-icon-download" @click="onDownload(item)">下载</el-link> <el-link type="success" icon="el-icon-download" @click="onDownload(item)">{{$t('components.diskFileUpload.load')}}</el-link>
<el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">预览 <el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">{{$t('components.diskFileUpload.preview')}}
</el-link> </el-link>
<el-link type="primary" icon="el-icon-edit" <el-link type="primary" icon="el-icon-edit"
v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))" v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))"
@click="onEdit(item)">编辑 @click="onEdit(item)">{{$t('components.diskFileUpload.edit')}}
</el-link> </el-link>
<el-link icon="el-icon-camera" <el-link icon="el-icon-camera"
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))" v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR @click="onOcr(item)">OCR
</el-link> </el-link>
<el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">删除</el-link> <el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">{{$t('components.diskFileUpload.delete')}}</el-link>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui'; import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui';
import Axios from 'axios'; import Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs'; import {Subject, Unsubscribable} from 'rxjs';
// 当前登录人token @Component({})
var token = "Bearer " + localStorage.getItem('token'); export default class DiskFileUpload extends Vue {
export default { /**
name: "disk-file-upload", * 当前表单对象
components: { *
'el-button': Button, * @type {*}
'el-row': Row, * @memberof DiskFileUpload
'el-col': Col, */
'el-link': Link, @Prop() public data!: any;
'el-icon': Icon,
'el-upload': Upload, /**
}, * 当前属性名
props: { *
// 当前表单对象 * @type {string}
data: { * @memberof DiskFileUpload
type: Object, */
}, @Prop() public formItemName!: string;
// 当前属性名
formItemName: { /**
type: String, * 当前属性值
}, *
// 当前属性值 * @type {string}
value: { * @memberof DiskFileUpload
type: String, */
}, @Prop() public value!: string;
// 订阅表单状态
formState: { /**
type: Subject * 当前表单状态
}, *
// 默认为当前实体名称，有指定则按表单参数 * @type {*}
folder: { * @memberof DiskFileUpload
type: String, */
}, @Prop() public formState!: any;
// 默认为当前实体主键id，有指定则按表单参数
ownerid: { /**
type: String, * 默认为当前实体名称，有指定则按表单参数
}, *
// 默认为当前属性名，有指定则按表单参数 * @type {string}
ownertype: { * @memberof DiskFileUpload
type: String, */
}, @Prop() public folder!: string;
// 持久化
persistence: { /**
type: Boolean, * 默认为当前实体主键id，有指定则按表单参数
default: false *
}, * @type {string}
// 是否显示拖拽区域 * @memberof DiskFileUpload
showDrag: { */
type: Boolean, @Prop() public ownerid!: string;
default: false
}, /**
// 是否显示预览按钮 * 默认为当前属性名，有指定则按表单参数
showPreview: { *
type: Boolean, * @type {string}
default: false * @memberof DiskFileUpload
}, */
// 是否显示在线编辑按钮 @Prop() public ownertype!: string;
showEdit: {
type: Boolean, /**
default: false * 持久化
}, *
// 是否显示OCR按钮 * @type {boolean}
showOcrview: { * @memberof DiskFileUpload
type: Boolean, */
default: false @Prop({default: false}) public persistence?: boolean;
},
// 单文件大小 /**
size: { * 是否显示拖拽区域
type: Number, *
default: 1 * @type {boolean}
}, * @memberof DiskFileUpload
// 文件上传个数 */
limit: { @Prop({default: false}) public showDrag?: boolean;
type: Number,
default: 5 /**
}, * 是否显示预览按钮
}, *
data() { * @type {boolean}
return { * @memberof DiskFileUpload
// 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存） */
srfuf: '0', @Prop({default: false}) public showPreview?: boolean;
// 上传提示语
uploadTip: `单个文件大小不超过${this.size}M，文件不超过${this.limit}个`, /**
// 文件列表 * 是否显示在线编辑按钮
uploadFileList: [], *
// headers * @type {boolean}
myHeaders: {Authorization: token}, * @memberof DiskFileUpload
// 表单状态事件 */
formStateEvent: Unsubscribable | undefined, @Prop({default: false}) public showEdit?: boolean;
// 批量更新标识，false为不更新，true才可以更新
isUpdateBatch: true, /**
// 新建状态标识,true为新建，false为编辑 * 是否显示OCR按钮
isCreate: true, *
} * @type {boolean}
}, * @memberof DiskFileUpload
computed: { */
/** @Prop({default: false}) public showOcrview?: boolean;
* return action
*/ /**
getAction() { * 单文件大小
const uploadUrl = '/net-disk/upload/' + this.getFolder + '?ownertype=' + this.getOwnertype + '&ownerid=' + this.getOwnerid; *
return uploadUrl; * @type {number}
}, * @memberof DiskFileUpload
/** */
* return folder @Prop({default: 1}) public size!: number;
*/
getFolder() { /**
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder); * 文件上传个数
return folder; *
}, * @type {number}
/** * @memberof DiskFileUpload
* return ownertype */
*/ @Prop({default: 5}) public limit!: number;
getOwnertype() {
const ownertype = typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype); /**
return ownertype; * 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
}, *
/** * @type {string}
* return ownerid * @memberof DiskFileUpload
*/ */
getOwnerid() { public srfuf: string = '0';
const ownerid = typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
return ownerid; /**
} * 上传提示语
}, *
watch: {}, * @type {string}
created() { * @memberof DiskFileUpload
this.formStateEvent = this.formState.subscribe(($event) => { */
public uploadTip: string = this.$t('components.diskFileUpload.clues')+this.size.toString()+"M，"+this.$t('components.diskFileUpload.clues1')+this.limit;
/**
* 文件列表
*
* @type {Array<any>}
* @memberof DiskFileUpload
*/
public uploadFileList: Array<any> = [];
/**
* 当前登陆人的token
*
* @type {string}
* @memberof DiskFileUpload
*/
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传文件请求头
*
* @type {*}
* @memberof DiskFileUpload
*/
public myHeaders: any = {Authorization: this.token};
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
const uploadUrl = '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
return uploadUrl;
}
/**
* return folder
*
* @memberof DiskFileUpload
*/
public getFolder() {
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
return folder;
}
/**
* return ownertype
*
* @memberof DiskFileUpload
*/
public getOwnertype() {
const ownertype = typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
return ownertype;
}
/**
* return ownerid
*
* @memberof DiskFileUpload
*/
public getOwnerid() {
const ownerid = typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
return ownerid;
}
/**
*
*
* @memberof DiskFileUpload
*/
public created(){
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
const data = JSON.parse(JSON.stringify($event.data)); const data = JSON.parse(JSON.stringify($event.data));
...@@ -229,26 +327,26 @@ export default { ...@@ -229,26 +327,26 @@ export default {
} }
} }
}); });
}, }
mounted() {
/**
}, * 获取文件列表
methods: { *
/** * @memberof DiskFileUpload
* 获取文件列表 */
*/ public getFiles(){
getFiles() {
// 拼接url // 拼接url
const getUrl = '/net-disk/files/' + this.getFolder; let _this:any = this;
const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求 // 发送get请求
Axios.get(getUrl, { Axios.get(getUrl, {
params: { params: {
ownertype: this.getOwnertype, ownertype: this.getOwnertype(),
ownerid: this.getOwnerid, ownerid: this.getOwnerid(),
}, },
}).then(response => { }).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error("获取文件列表失败!"); Message.error(_this.$t('components.diskFileUpload.getFileFailure')+'!');
return; return;
} }
// 返回的是一个jsonArray // 返回的是一个jsonArray
...@@ -259,199 +357,221 @@ export default { ...@@ -259,199 +357,221 @@ export default {
} }
} }
}).catch(error => { }).catch(error => {
Message.error("获取文件列表失败:" + error); Message.error(_this.$t('components.diskFileUpload.getFileFailure')+':'+ error);
}); });
}, }
/**
* 自定义上传文件 /**
*/ * 自定义上传文件
customUploadFile(param) { *
// 上传的文件 * @param 上传文件
let file = param.file; * @memberof DiskFileUpload
// 文件大小 */
const isSize = file.size / 1024 / 1024 < this.size; public customUploadFile(param: any) {
if (!isSize) { // 上传的文件
Message.error(`上传失败,单个文件不得超过${this.size}M!`); let _this: any = this;
return; let file = param.file;
// 文件大小
const isSize = file.size / 1024 / 1024 < this.size;
if (!isSize) {
Message.error(_this.$t('components.diskFileUpload.loadFailure1')+_this.size.toString()+"M!");
return;
}
// formData传参
let formData = new FormData();
formData.append('file', file);
// 拼接url
const uploadUrl = this.getAction();
// 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.loadFailure')+'!');
} }
// formData传参 // 返回的是一个jsonobject
let formData = new FormData(); if (response.data) {
formData.append('file', file); // 新建表单上传，后续需要批量更新操作
// 拼接url if (this.isCreate == true) {
const uploadUrl = this.getAction; this.isUpdateBatch = true;
// 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => {
if (!response || response.status != 200) {
Message.error('上传文件失败!');
} }
// 返回的是一个jsonobject // 保存到文件列表进行显示
if (response.data) { this.uploadFileList.push(response.data);
// 新建表单上传，后续需要批量更新操作 // persistence=true时需要持久化表单属性
if (this.isCreate == true) { if (this.persistence == true && this.uploadFileList.length > 0) {
this.isUpdateBatch = true; const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}
}).catch(err => {
Message.error(_this.$t('components.diskFileUpload.loadFailure')+':'+ err);
})
}
/**
* 下载文件
*
* @param item 下载文件
* @memberof DiskFileUpload
*/
public onDownload(item: any) {
// 拼接url
let _this: any = this;
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename);
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': item.authcode
},
responseType: 'arraybuffer',
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.downloadFile')+'!');
return;
}
// 请求成功，后台返回的是一个文件流
if (response.data) {
// 获取文件名
const disposition = response.headers['content-disposition'];
const filename = disposition.split('filename=')[1];
// 用blob对象获取文件流
var blob = new Blob([response.data], {type: response.headers['content-type']});
// 创建下载链接
var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性
var a = document.createElement('a');
a.href = href;
a.download = filename;
// 添加a元素到当前网页
document.body.appendChild(a);
// 触发a元素的点击事件，实现下载
a.click();
// 从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
}
}).catch(error => {
Message.error(_this.$t('components.diskFileUpload.downloadFile')+':'+ error);
});
}
/**
* 预览文件
*
* @param item 预览文件
* @memberof DiskFileUpload
*/
public onPreview(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(previewUrl);
}
/**
* 编辑文件
*
* @param item
* @memberof DiskFileUpload
*/
public onEdit(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const editUrl = '/net-disk/edit/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(editUrl);
}
/**
* ocr识别
* @param item
* @memberof DiskFileUpload
*/
public onOcr(item: any) {
// 拼接url
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(ocrUrl);
}
/**
* 删除文件
*
* @param item
* @param index
* @memberof DiskFileUpload
*/
public onRemove(item: any, index: number) {
let _this:any = this;
if (item) {
MessageBox.confirm(_this.$t('components.diskFileUpload.deleteFile'), _this.$t('components.diskFileUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskFileUpload.true'),
cancelButtonText: _this.$t('components.diskFileUpload.false'),
type: 'warning'
}).then(() => {
//　拼接url
const deleteUrl = '/net-disk/files/' + item.id;
// 发送delete请求
Axios.delete(deleteUrl).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+'!');
} }
// 保存到文件列表进行显示 // 从文件列表中删除
this.uploadFileList.push(response.data); this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性 // persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) { if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList); const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
} }
} }).catch(error => {
}).catch(err => { // 提示删除失败
Message.error('上传文件失败:' + err); Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+':'+ error);
});
},
/**
* 下载文件
* @param item
*/
onDownload(item) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename);
const downloadUrl = '/net-disk/download/' + this.getFolder + '/' + id + '/' + name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': item.authcode
},
responseType: 'arraybuffer',
}).then(response => {
if (!response || response.status != 200) {
Message.error("下载文件失败!");
return;
}
// 请求成功，后台返回的是一个文件流
if (response.data) {
// 获取文件名
const disposition = response.headers['content-disposition'];
const filename = disposition.split('filename=')[1];
// 用blob对象获取文件流
var blob = new Blob([response.data], {type: response.headers['content-type']});
// 创建下载链接
var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性
var a = document.createElement('a');
a.href = href;
a.download = filename;
// 添加a元素到当前网页
document.body.appendChild(a);
// 触发a元素的点击事件，实现下载
a.click();
// 从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error('下载文件失败,未获取到文件!');
}
}).catch(error => {
Message.error("下载文件失败:" + error);
});
},
/**
* 预览文件
* @param item
*/
onPreview(item) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const previewUrl = '/net-disk/preview/' + this.getFolder + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(previewUrl);
},
/**
* 编辑文件
* @param item
*/
onEdit(item) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const editUrl = '/net-disk/edit/' + this.getFolder + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(editUrl);
},
/**
* ocr识别
* @param item
*/
onOcr(item) {
// 拼接url
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(ocrUrl);
},
/**
* 删除文件
* @param item
* @param index
*/
onRemove(item, index) {
if (item) {
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//　拼接url
const deleteUrl = '/net-disk/files/' + item.id;
// 发送delete请求
Axios.delete(deleteUrl).then(response => {
if (!response || response.status != 200) {
Message.error("删除文件失败!");
}
// 从文件列表中删除
this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch(error => {
// 提示删除失败
Message.error("删除文件失败:" + error);
});
}); });
}
},
/**
* 批量更新文件表的ownerid
*/
updateFileBatch(files, opt) {
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder + '?ownertype=' + this.getOwnertype + "&ownerid=" + this.getOwnerid;
// requestBody参数
let requestBody = [];
if (files) {
requestBody = files;
}
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error("批量更新文件失败!");
return;
}
}).catch(error => {
Message.error("批量更新文件失败:" + error);
}); });
}, }
}
/**
* 批量更新文件表的ownerid
*
* @memberof DiskFileUpload
*/
public updateFileBatch(files: any, opt: any) {
let _this:any = this;
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
// requestBody参数
let requestBody = [];
if (files) {
requestBody = files;
}
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure')+'!');
return;
}
}).catch(error => {
Message.error(_this.$t('components.diskFileUpload.updateFailure')+':'+ error);
});
} }
} }
</script> </script>
<style lang="less">
<style scoped>
#file-upload { #file-upload {
width: auto; width: auto;
height: auto; height: auto;
......
src/components/disk-image-upload/disk-image-upload.vue
浏览文件 @ b3f802ec
...@@ -15,21 +15,21 @@ ...@@ -15,21 +15,21 @@
<img class="el-upload-list__item-thumbnail" :src="file.url"> <img class="el-upload-list__item-thumbnail" :src="file.url">
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<!--预览按钮--> <!--预览按钮-->
<span class="el-upload-list__item-preview" @click="onPreview(file)" title="预览" <span class="el-upload-list__item-preview" @click="onPreview(file)" :title="$t('components.diskImageUpload.preview')"
v-show="showPreview"> v-show="showPreview">
<i class="el-icon-view"></i> <i class="el-icon-view"></i>
</span> </span>
<!--OCR按钮--> <!--OCR按钮-->
<span class="el-upload-list__item-delete" @click="onOcr(file)" title="OCR识别" <span class="el-upload-list__item-delete" @click="onOcr(file)" :title="$t('components.diskImageUpload.OCRdiscern')"
v-show="showOcrview && (file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/))"> v-show="showOcrview && (file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/))">
<i class="el-icon-camera"></i> <i class="el-icon-camera"></i>
</span> </span>
<!--下载按钮--> <!--下载按钮-->
<span class="el-upload-list__item-delete" @click="onDownload(file)" title="下载"> <span class="el-upload-list__item-delete" @click="onDownload(file)" :title="$t('components.diskImageUpload.load')">
<i class="el-icon-download"></i> <i class="el-icon-download"></i>
</span> </span>
<!--删除按钮--> <!--删除按钮-->
<span class="el-upload-list__item-delete" @click="onRemove(file)" title="删除"> <span class="el-upload-list__item-delete" @click="onRemove(file)" :title="$t('components.diskImageUpload.delete')">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</span> </span>
</span> </span>
...@@ -312,6 +312,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -312,6 +312,7 @@ export default class DiskImageUplaod extends Vue {
*/ */
public getFiles() { public getFiles() {
// 拼接url // 拼接url
let _this:any = this;
const getUrl = '/net-disk/files/' + this.getFolder(); const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求 // 发送get请求
Axios.get(getUrl, { Axios.get(getUrl, {
...@@ -321,7 +322,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -321,7 +322,7 @@ export default class DiskImageUplaod extends Vue {
}, },
}).then(response => { }).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error("获取图片列表失败!"); Message.error(_this.$t('components.diskImageUpload.getImageFailure')+"!");
return; return;
} }
// 返回的是一个jsonArray // 返回的是一个jsonArray
...@@ -337,7 +338,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -337,7 +338,7 @@ export default class DiskImageUplaod extends Vue {
} }
} }
}).catch(error => { }).catch(error => {
Message.error("获取图片列表失败:" + error); Message.error(_this.$t('components.diskImageUpload.getImageFailure')+':'+ error);
}); });
} }
...@@ -348,6 +349,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -348,6 +349,7 @@ export default class DiskImageUplaod extends Vue {
*/ */
public getRealImageData(file: any) { public getRealImageData(file: any) {
let fileData = file; let fileData = file;
let _this: any = this;
// 拼接url，与下载一致 // 拼接url，与下载一致
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + fileData.id + '/' + fileData.name; const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + fileData.id + '/' + fileData.name;
// 发送get请求 // 发送get请求
...@@ -358,7 +360,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -358,7 +360,7 @@ export default class DiskImageUplaod extends Vue {
responseType: 'blob', responseType: 'blob',
}).then(res => { }).then(res => {
if (!res || res.status != 200) { if (!res || res.status != 200) {
Message.error("下载缩略图失败!"); Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+'!');
} }
// 请求成功，后台返回的是一个文件流 // 请求成功，后台返回的是一个文件流
if (res.data) { if (res.data) {
...@@ -374,16 +376,16 @@ export default class DiskImageUplaod extends Vue { ...@@ -374,16 +376,16 @@ export default class DiskImageUplaod extends Vue {
} else if (fileData.id) { } else if (fileData.id) {
this.imageFileids.push(fileData.id); this.imageFileids.push(fileData.id);
} else { } else {
Message.error("图片id不存在!"); Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return; return;
} }
// 保存图片到图片列表进行显示 // 保存图片到图片列表进行显示
this.imageList.push(fileData); this.imageList.push(fileData);
} else { } else {
Message.error('下载缩略图失败,未获取到文件!'); Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
} }
}).catch(error => { }).catch(error => {
Message.error("下载缩略图失败:" + error); Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+':' + error);
}); });
} }
...@@ -394,14 +396,15 @@ export default class DiskImageUplaod extends Vue { ...@@ -394,14 +396,15 @@ export default class DiskImageUplaod extends Vue {
*/ */
public beforeUpload(file: any) { public beforeUpload(file: any) {
// 支持上传的图片格式 // 支持上传的图片格式
let _this: any = this;
if (!file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/)) { if (!file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/)) {
Message.error(`上传失败,仅支持＇gif，jpg，png，bmp＇格式的图片!`); Message.error(_this.$t('components.diskImageUpload.uploadImageFailure1'));
return false; return false;
} }
// 文件大小 // 文件大小
const isSize = file.size / 1024 / 1024 < this.size; const isSize = file.size / 1024 / 1024 < this.size;
if (!isSize) { if (!isSize) {
Message.error(`上传失败,单个图片不得超过${this.size}M!`); Message.error(_this.$t('components.diskImageUpload.uploadFailure')+this.size.toString()+"M!");
return false; return false;
} }
} }
...@@ -412,6 +415,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -412,6 +415,7 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public customImageUpload(param: any) { public customImageUpload(param: any) {
let _this: any = this;
// 上传的文件 // 上传的文件
let file = param.file; let file = param.file;
// formData传参 // formData传参
...@@ -422,7 +426,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -422,7 +426,7 @@ export default class DiskImageUplaod extends Vue {
// 发送post请求 // 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error('上传图片失败!'); Message.error(_this.$t('components.diskImageUpload.uploadImageFailure')+"!");
} }
// 返回的是一个jsonobject // 返回的是一个jsonobject
if (response.data) { if (response.data) {
...@@ -437,7 +441,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -437,7 +441,7 @@ export default class DiskImageUplaod extends Vue {
responseType: 'blob', responseType: 'blob',
}).then(res => { }).then(res => {
if (!res || res.status != 200) { if (!res || res.status != 200) {
Message.error("下载缩略图失败!"); Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+"!");
return; return;
} }
// 请求成功，后台返回的是一个文件流 // 请求成功，后台返回的是一个文件流
...@@ -454,7 +458,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -454,7 +458,7 @@ export default class DiskImageUplaod extends Vue {
} else if (returnData.id) { } else if (returnData.id) {
this.imageFileids.push(returnData.id); this.imageFileids.push(returnData.id);
} else { } else {
Message.error("图片id不存在!"); Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return; return;
} }
// 保存jsonobject到图片列表进行显示 // 保存jsonobject到图片列表进行显示
...@@ -469,14 +473,14 @@ export default class DiskImageUplaod extends Vue { ...@@ -469,14 +473,14 @@ export default class DiskImageUplaod extends Vue {
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
} }
} else { } else {
Message.error('下载缩略图失败,未获取到文件!'); Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
} }
}).catch(error => { }).catch(error => {
Message.error("下载缩略图失败:" + error); Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+':' + error);
}); });
} }
}).catch(err => { }).catch(err => {
Message.error('上传图片失败:' + err); Message.error(_this.$t('components.diskImageUpload.uploadImageFailure')+':' + err);
}); });
} }
...@@ -487,11 +491,12 @@ export default class DiskImageUplaod extends Vue { ...@@ -487,11 +491,12 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public onPreview(file: any) { public onPreview(file: any) {
let _this: any = this;
if (file.url) { if (file.url) {
this.dialogImageUrl = file.url; this.dialogImageUrl = file.url;
this.dialogVisible = true; this.dialogVisible = true;
} else { } else {
Message.error("图片url不存在"); Message.error(_this.$t('components.diskImageUpload.notImageUrl'));
} }
} }
...@@ -516,6 +521,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -516,6 +521,7 @@ export default class DiskImageUplaod extends Vue {
*/ */
public onDownload(file: any) { public onDownload(file: any) {
// 拼接url // 拼接url
let _this: any = this;
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id); const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.filename); const name = typeof file.name == "string" ? file.name : JSON.stringify(file.filename);
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name; const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
...@@ -527,7 +533,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -527,7 +533,7 @@ export default class DiskImageUplaod extends Vue {
responseType: 'blob', responseType: 'blob',
}).then(response => { }).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error("下载图片失败!"); Message.error(_this.$t('components.diskImageUpload.loadImageFailure2')+'!');
return; return;
} }
// 请求成功，后台返回的是一个文件流 // 请求成功，后台返回的是一个文件流
...@@ -552,10 +558,10 @@ export default class DiskImageUplaod extends Vue { ...@@ -552,10 +558,10 @@ export default class DiskImageUplaod extends Vue {
// 释放blob对象 // 释放blob对象
URL.revokeObjectURL(href); URL.revokeObjectURL(href);
} else { } else {
Message.error('下载图片失败,未找到图片!'); Message.error(_this.$t('components.diskImageUpload.loadImageFailure3'));
} }
}).catch(error => { }).catch(error => {
Message.error("下载图片失败:" + error); Message.error(_this.$t('components.diskImageUpload.loadImageFailure2')+':' + error);
}); });
} }
...@@ -566,10 +572,11 @@ export default class DiskImageUplaod extends Vue { ...@@ -566,10 +572,11 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public onRemove(file: any) { public onRemove(file: any) {
let _this: any = this;
if (file) { if (file) {
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', { MessageBox.confirm(_this.$t('components.diskImageUpload.deleteFile'),_this.$t('components.diskImageUpload.deleteFilePrompt'), {
confirmButtonText: '确定', confirmButtonText: _this.$t('components.diskImageUpload.true'),
cancelButtonText: '取消', cancelButtonText: _this.$t('components.diskImageUpload.false'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
if (this.imageFileids.indexOf(file.id) != -1) { if (this.imageFileids.indexOf(file.id) != -1) {
...@@ -580,7 +587,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -580,7 +587,7 @@ export default class DiskImageUplaod extends Vue {
// 发送delete请求 // 发送delete请求
Axios.delete(deleteUrl).then(response => { Axios.delete(deleteUrl).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error("删除图片失败!"); Message.error(_this.$t('components.diskImageUpload.deleteImageFailure')+'!');
} }
// 从fileid数组中删除 // 从fileid数组中删除
this.imageFileids.splice(index, 1); this.imageFileids.splice(index, 1);
...@@ -593,7 +600,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -593,7 +600,7 @@ export default class DiskImageUplaod extends Vue {
} }
}).catch(error => { }).catch(error => {
// 提示删除失败 // 提示删除失败
Message.error("删除图片失败:" + error); Message.error(_this.$t('components.diskImageUpload.deleteImageFailure')+':' + error);
}); });
} }
}); });
...@@ -607,6 +614,7 @@ export default class DiskImageUplaod extends Vue { ...@@ -607,6 +614,7 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public updateFileBatch(files: any) { public updateFileBatch(files: any) {
let _this: any = this;
// 拼接url // 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid(); const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
// requestBody参数 // requestBody参数
...@@ -622,11 +630,11 @@ export default class DiskImageUplaod extends Vue { ...@@ -622,11 +630,11 @@ export default class DiskImageUplaod extends Vue {
timeout: 2000 timeout: 2000
}).then(response => { }).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error("批量更新文件失败!"); Message.error(_this.$t('components.diskImageUpload.updateFailure')+'!');
return; return;
} }
}).catch(error => { }).catch(error => {
Message.error("批量更新文件失败:" + error); Message.error(_this.$t('components.diskImageUpload.updateFailure')+':' + error);
}); });
} }
......
src/locale/lanres/components/components_en_US.ts
浏览文件 @ b3f802ec
...@@ -349,5 +349,27 @@ export default { ...@@ -349,5 +349,27 @@ export default {
false: 'False', false: 'False',
deleteFileFailure: 'File deletion failed', deleteFileFailure: 'File deletion failed',
updateFailure: 'Batch update file failed', updateFailure: 'Batch update file failed',
},
diskImageUpload:{
preview: 'Preview',
OCRdiscern: 'OCRdiscern',
load: 'Load',
delete: 'Delete',
getImageFailure: 'Failed to get list of images',
loadImageFailure: 'Failed to download thumbnails',
loadImageFailure1: 'Failed to download thumbnail, failed to get file!',
loadImageFailure2:'Download image failed',
loadImageFailure3:'Download picture failed, no picture found!',
ImageIdNone: 'Picture ID does not exist!',
uploadImageFailure: 'Failed to upload image',
uploadImageFailure1: "Upload failed, only support 'GIF, JPG, PNG, BMP' format images!",
uploadFailure: 'Upload failed, individual image must not exceed',
notImageUrl: 'The image URL does not exist',
deleteFile: 'This action will permanently delete the file. Do you want to continue?',
deleteFilePrompt: 'Prompt',
true: 'True',
false: 'False',
deleteImageFailure:'Image deletion failed',
updateFailure: 'Batch update file failed',
} }
}; };
\ No newline at end of file
src/locale/lanres/components/components_zh_CN.ts
浏览文件 @ b3f802ec
...@@ -350,5 +350,27 @@ export default { ...@@ -350,5 +350,27 @@ export default {
false: '取消', false: '取消',
deleteFileFailure: '删除文件失败', deleteFileFailure: '删除文件失败',
updateFailure: '批量更新文件失败', updateFailure: '批量更新文件失败',
},
diskImageUpload:{
preview: '预览',
OCRdiscern: 'ORC识别',
load: '下载',
delete: '删除',
getImageFailure: '获取图片列表失败',
loadImageFailure: '下载缩略图失败',
loadImageFailure1: '下载缩略图失败,未获取到文件!',
loadImageFailure2:'下载图片失败',
loadImageFailure3:'下载图片失败,未找到图片!',
ImageIdNone: '图片id不存在!',
uploadImageFailure: '上传图片失败',
uploadImageFailure1: '上传失败,仅支持＇gif，jpg，png，bmp＇格式的图片!',
uploadFailure: '上传失败,单个图片不得超过',
notImageUrl: '图片url不存在',
deleteFile: '此操作将永久删除该文件, 是否继续?',
deleteFilePrompt: '提示',
true: '确定',
false: '取消',
deleteImageFailure:'删除图片失败',
updateFailure: '批量更新文件失败',
} }
}; };
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或