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 @@
drag
multiple
list-type="text"
:action="getAction"
:action="getAction()"
:headers="myHeaders"
:file-list="uploadFileList"
:show-file-list="false"
......@@ -17,8 +17,8 @@
<div>
<i class="el-icon-upload"></i>
<div>
<span>将文件拖到此处，或</span>
<span style="color:#409EFF;">点击上传</span>
<span>{{$t('components.diskFileUpload.fileDrag')}}</span>
<span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span>
</div>
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
</div>
......@@ -30,13 +30,13 @@
ref="upload"
multiple
list-type="text"
:action="getAction"
:action="getAction()"
:headers="myHeaders"
:file-list="uploadFileList"
:show-file-list="false"
:limit="limit"
: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>
</el-upload>
</el-col>
......@@ -47,158 +47,256 @@
<span>{{item.name}}</span>
</div>
<div class="fileMain">
<el-link type="success" icon="el-icon-download" @click="onDownload(item)">下载</el-link>
<el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">预览
<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)">{{$t('components.diskFileUpload.preview')}}
</el-link>
<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)$/))"
@click="onEdit(item)">编辑
@click="onEdit(item)">{{$t('components.diskFileUpload.edit')}}
</el-link>
<el-link icon="el-icon-camera"
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR
</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>
</el-col>
</el-row>
</div>
</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 Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs';
// 当前登录人token
var token = "Bearer " + localStorage.getItem('token');
export default {
name: "disk-file-upload",
components: {
'el-button': Button,
'el-row': Row,
'el-col': Col,
'el-link': Link,
'el-icon': Icon,
'el-upload': Upload,
},
props: {
// 当前表单对象
data: {
type: Object,
},
// 当前属性名
formItemName: {
type: String,
},
// 当前属性值
value: {
type: String,
},
// 订阅表单状态
formState: {
type: Subject
},
// 默认为当前实体名称，有指定则按表单参数
folder: {
type: String,
},
// 默认为当前实体主键id，有指定则按表单参数
ownerid: {
type: String,
},
// 默认为当前属性名，有指定则按表单参数
ownertype: {
type: String,
},
// 持久化
persistence: {
type: Boolean,
default: false
},
// 是否显示拖拽区域
showDrag: {
type: Boolean,
default: false
},
// 是否显示预览按钮
showPreview: {
type: Boolean,
default: false
},
// 是否显示在线编辑按钮
showEdit: {
type: Boolean,
default: false
},
// 是否显示OCR按钮
showOcrview: {
type: Boolean,
default: false
},
// 单文件大小
size: {
type: Number,
default: 1
},
// 文件上传个数
limit: {
type: Number,
default: 5
},
},
data() {
return {
// 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
srfuf: '0',
// 上传提示语
uploadTip: `单个文件大小不超过${this.size}M，文件不超过${this.limit}个`,
// 文件列表
uploadFileList: [],
// headers
myHeaders: {Authorization: token},
// 表单状态事件
formStateEvent: Unsubscribable | undefined,
// 批量更新标识，false为不更新，true才可以更新
isUpdateBatch: true,
// 新建状态标识,true为新建，false为编辑
isCreate: true,
}
},
computed: {
/**
* return action
*/
getAction() {
const uploadUrl = '/net-disk/upload/' + this.getFolder + '?ownertype=' + this.getOwnertype + '&ownerid=' + this.getOwnerid;
return uploadUrl;
},
/**
* return folder
*/
getFolder() {
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
return folder;
},
/**
* return ownertype
*/
getOwnertype() {
const ownertype = typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
return ownertype;
},
/**
* return ownerid
*/
getOwnerid() {
const ownerid = typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
return ownerid;
}
},
watch: {},
created() {
this.formStateEvent = this.formState.subscribe(($event) => {
@Component({})
export default class DiskFileUpload extends Vue {
/**
* 当前表单对象
*
* @type {*}
* @memberof DiskFileUpload
*/
@Prop() public data!: any;
/**
* 当前属性名
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public formItemName!: string;
/**
* 当前属性值
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public value!: string;
/**
* 当前表单状态
*
* @type {*}
* @memberof DiskFileUpload
*/
@Prop() public formState!: any;
/**
* 默认为当前实体名称，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public folder!: string;
/**
* 默认为当前实体主键id，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public ownerid!: string;
/**
* 默认为当前属性名，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public ownertype!: string;
/**
* 持久化
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public persistence?: boolean;
/**
* 是否显示拖拽区域
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showDrag?: boolean;
/**
* 是否显示预览按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showPreview?: boolean;
/**
* 是否显示在线编辑按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showEdit?: boolean;
/**
* 是否显示OCR按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showOcrview?: boolean;
/**
* 单文件大小
*
* @type {number}
* @memberof DiskFileUpload
*/
@Prop({default: 1}) public size!: number;
/**
* 文件上传个数
*
* @type {number}
* @memberof DiskFileUpload
*/
@Prop({default: 5}) public limit!: number;
/**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
*
* @type {string}
* @memberof DiskFileUpload
*/
public srfuf: string = '0';
/**
* 上传提示语
*
* @type {string}
* @memberof DiskFileUpload
*/
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')) {
const data = JSON.parse(JSON.stringify($event.data));
......@@ -229,26 +327,26 @@ export default {
}
}
});
},
mounted() {
},
methods: {
/**
* 获取文件列表
*/
getFiles() {
}
/**
* 获取文件列表
*
* @memberof DiskFileUpload
*/
public getFiles(){
// 拼接url
const getUrl = '/net-disk/files/' + this.getFolder;
let _this:any = this;
const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求
Axios.get(getUrl, {
params: {
ownertype: this.getOwnertype,
ownerid: this.getOwnerid,
ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(),
},
}).then(response => {
if (!response || response.status != 200) {
Message.error("获取文件列表失败!");
Message.error(_this.$t('components.diskFileUpload.getFileFailure')+'!');
return;
}
// 返回的是一个jsonArray
......@@ -259,199 +357,221 @@ export default {
}
}
}).catch(error => {
Message.error("获取文件列表失败:" + error);
Message.error(_this.$t('components.diskFileUpload.getFileFailure')+':'+ error);
});
},
/**
* 自定义上传文件
*/
customUploadFile(param) {
// 上传的文件
let file = param.file;
// 文件大小
const isSize = file.size / 1024 / 1024 < this.size;
if (!isSize) {
Message.error(`上传失败,单个文件不得超过${this.size}M!`);
return;
}
/**
* 自定义上传文件
*
* @param 上传文件
* @memberof DiskFileUpload
*/
public customUploadFile(param: any) {
// 上传的文件
let _this: any = this;
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传参
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('上传文件失败!');
// 返回的是一个jsonobject
if (response.data) {
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// 返回的是一个jsonobject
if (response.data) {
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
// 保存到文件列表进行显示
this.uploadFileList.push(response.data);
// persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) {
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时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) {
if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}
}).catch(err => {
Message.error('上传文件失败:' + err);
});
},
/**
* 下载文件
* @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);
});
}).catch(error => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+':'+ 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>
<style scoped>
<style lang="less">
#file-upload {
width: auto;
height: auto;
......
src/components/disk-image-upload/disk-image-upload.vue
浏览文件 @ b3f802ec
......@@ -15,21 +15,21 @@
<img class="el-upload-list__item-thumbnail" :src="file.url">
<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">
<i class="el-icon-view"></i>
</span>
<!--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)$/))">
<i class="el-icon-camera"></i>
</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>
</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>
</span>
</span>
......@@ -312,6 +312,7 @@ export default class DiskImageUplaod extends Vue {
*/
public getFiles() {
// 拼接url
let _this:any = this;
const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求
Axios.get(getUrl, {
......@@ -321,7 +322,7 @@ export default class DiskImageUplaod extends Vue {
},
}).then(response => {
if (!response || response.status != 200) {
Message.error("获取图片列表失败!");
Message.error(_this.$t('components.diskImageUpload.getImageFailure')+"!");
return;
}
// 返回的是一个jsonArray
......@@ -337,7 +338,7 @@ export default class DiskImageUplaod extends Vue {
}
}
}).catch(error => {
Message.error("获取图片列表失败:" + error);
Message.error(_this.$t('components.diskImageUpload.getImageFailure')+':'+ error);
});
}
......@@ -348,6 +349,7 @@ export default class DiskImageUplaod extends Vue {
*/
public getRealImageData(file: any) {
let fileData = file;
let _this: any = this;
// 拼接url，与下载一致
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + fileData.id + '/' + fileData.name;
// 发送get请求
......@@ -358,7 +360,7 @@ export default class DiskImageUplaod extends Vue {
responseType: 'blob',
}).then(res => {
if (!res || res.status != 200) {
Message.error("下载缩略图失败!");
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+'!');
}
// 请求成功，后台返回的是一个文件流
if (res.data) {
......@@ -374,16 +376,16 @@ export default class DiskImageUplaod extends Vue {
} else if (fileData.id) {
this.imageFileids.push(fileData.id);
} else {
Message.error("图片id不存在!");
Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return;
}
// 保存图片到图片列表进行显示
this.imageList.push(fileData);
} else {
Message.error('下载缩略图失败,未获取到文件!');
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
}
}).catch(error => {
Message.error("下载缩略图失败:" + error);
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+':' + error);
});
}
......@@ -394,14 +396,15 @@ export default class DiskImageUplaod extends Vue {
*/
public beforeUpload(file: any) {
// 支持上传的图片格式
let _this: any = this;
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;
}
// 文件大小
const isSize = file.size / 1024 / 1024 < this.size;
if (!isSize) {
Message.error(`上传失败,单个图片不得超过${this.size}M!`);
Message.error(_this.$t('components.diskImageUpload.uploadFailure')+this.size.toString()+"M!");
return false;
}
}
......@@ -412,6 +415,7 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod
*/
public customImageUpload(param: any) {
let _this: any = this;
// 上传的文件
let file = param.file;
// formData传参
......@@ -422,7 +426,7 @@ export default class DiskImageUplaod extends Vue {
// 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => {
if (!response || response.status != 200) {
Message.error('上传图片失败!');
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure')+"!");
}
// 返回的是一个jsonobject
if (response.data) {
......@@ -437,7 +441,7 @@ export default class DiskImageUplaod extends Vue {
responseType: 'blob',
}).then(res => {
if (!res || res.status != 200) {
Message.error("下载缩略图失败!");
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+"!");
return;
}
// 请求成功，后台返回的是一个文件流
......@@ -454,7 +458,7 @@ export default class DiskImageUplaod extends Vue {
} else if (returnData.id) {
this.imageFileids.push(returnData.id);
} else {
Message.error("图片id不存在!");
Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return;
}
// 保存jsonobject到图片列表进行显示
......@@ -469,14 +473,14 @@ export default class DiskImageUplaod extends Vue {
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
} else {
Message.error('下载缩略图失败,未获取到文件!');
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
}
}).catch(error => {
Message.error("下载缩略图失败:" + error);
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+':' + error);
});
}
}).catch(err => {
Message.error('上传图片失败:' + err);
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure')+':' + err);
});
}
......@@ -487,11 +491,12 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod
*/
public onPreview(file: any) {
let _this: any = this;
if (file.url) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
} else {
Message.error("图片url不存在");
Message.error(_this.$t('components.diskImageUpload.notImageUrl'));
}
}
......@@ -516,6 +521,7 @@ export default class DiskImageUplaod extends Vue {
*/
public onDownload(file: any) {
// 拼接url
let _this: any = this;
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 downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
......@@ -527,7 +533,7 @@ export default class DiskImageUplaod extends Vue {
responseType: 'blob',
}).then(response => {
if (!response || response.status != 200) {
Message.error("下载图片失败!");
Message.error(_this.$t('components.diskImageUpload.loadImageFailure2')+'!');
return;
}
// 请求成功，后台返回的是一个文件流
......@@ -552,10 +558,10 @@ export default class DiskImageUplaod extends Vue {
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error('下载图片失败,未找到图片!');
Message.error(_this.$t('components.diskImageUpload.loadImageFailure3'));
}
}).catch(error => {
Message.error("下载图片失败:" + error);
Message.error(_this.$t('components.diskImageUpload.loadImageFailure2')+':' + error);
});
}
......@@ -566,10 +572,11 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod
*/
public onRemove(file: any) {
let _this: any = this;
if (file) {
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
MessageBox.confirm(_this.$t('components.diskImageUpload.deleteFile'),_this.$t('components.diskImageUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskImageUpload.true'),
cancelButtonText: _this.$t('components.diskImageUpload.false'),
type: 'warning'
}).then(() => {
if (this.imageFileids.indexOf(file.id) != -1) {
......@@ -580,7 +587,7 @@ export default class DiskImageUplaod extends Vue {
// 发送delete请求
Axios.delete(deleteUrl).then(response => {
if (!response || response.status != 200) {
Message.error("删除图片失败!");
Message.error(_this.$t('components.diskImageUpload.deleteImageFailure')+'!');
}
// 从fileid数组中删除
this.imageFileids.splice(index, 1);
......@@ -593,7 +600,7 @@ export default class DiskImageUplaod extends Vue {
}
}).catch(error => {
// 提示删除失败
Message.error("删除图片失败:" + error);
Message.error(_this.$t('components.diskImageUpload.deleteImageFailure')+':' + error);
});
}
});
......@@ -607,6 +614,7 @@ export default class DiskImageUplaod extends Vue {
* @memberof DiskImageUplaod
*/
public updateFileBatch(files: any) {
let _this: any = this;
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
// requestBody参数
......@@ -622,11 +630,11 @@ export default class DiskImageUplaod extends Vue {
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error("批量更新文件失败!");
Message.error(_this.$t('components.diskImageUpload.updateFailure')+'!');
return;
}
}).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 {
false: 'False',
deleteFileFailure: 'File deletion 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 {
false: '取消',
deleteFileFailure: '删除文件失败',
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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或