Skip to content

I
ibzuaa
提交 b3a20067 编写于 作者: laizhilong's avatar laizhilong
浏览文件
操作

表单自定义图片上传组件:修改编写方式为typescript

上级 3dfdcb72
隐藏空白字符变更
内嵌 并排
正在显示 包含 543 行增加 和 408 行删除
app_web/src/components/ibiz-image-upload/ibiz-image-upload.vue
浏览文件 @ b3a20067
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
multiple multiple
:file-list="imageList" :file-list="imageList"
list-type="picture-card" list-type="picture-card"
:action="getAction" :action="getAction()"
:headers="myHeaders" :headers="myHeaders"
:limit="limit" :limit="limit"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:http-request="customUploadImage"> :http-request="customImageUpload">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<div slot="file" slot-scope="{file,index}"> <div slot="file" slot-scope="{file,index}">
<img class="el-upload-list__item-thumbnail" :src="file.url"> <img class="el-upload-list__item-thumbnail" :src="file.url">
...@@ -41,127 +41,235 @@ ...@@ -41,127 +41,235 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import {Upload, Message, MessageBox} from 'element-ui'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {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 IbizImageUpload extends Vue {
export default { /**
name: "ibiz-image-upload", * 当前表单对象
components: { *
'el-upload': Upload, * @type {*}
}, * @memberof DiskImageUplaod
props: { */
// 当前表单对象 @Prop() public data!: any;
data: {
type: Object, /**
}, * 当前属性名
// 当前属性名 *
formItemName: { * @type {string}
type: String, * @memberof DiskImageUplaod
}, */
// 当前属性值 @Prop() public formItemName!: string;
value: {
type: String, /**
}, * 当前属性值
// 订阅表单状态 *
formState: { * @type {string}
type: Subject * @memberof DiskImageUplaod
}, */
// 默认为当前实体名称，有指定则按表单参数 @Prop() public value!: string;
folder: {
type: String, /**
}, * 当前表单状态
// 默认为当前实体主键id，有指定则按表单参数 *
ownerid: { * @type {*}
type: String, * @memberof DiskImageUplaod
}, */
// 默认为当前属性名，有指定则按表单参数 @Prop() public formState!: any;
ownertype: {
type: String, /**
}, * 默认为当前实体名称，有指定则按表单参数
// 持久化 *
persistence: { * @type {string}
type: Boolean, * @memberof DiskImageUplaod
default: false */
}, @Prop() public folder!: string;
// 是否显示预览按钮
showPreview: { /**
type: Boolean, * 默认为当前实体主键id，有指定则按表单参数
default: false *
}, * @type {string}
// 是否显示OCR按钮 * @memberof DiskImageUplaod
showOcrview: { */
type: Boolean, @Prop() public ownerid!: string;
default: false
}, /**
// 单图片大小 * 默认为当前属性名，有指定则按表单参数
size: { *
type: Number, * @type {string}
default: 2 * @memberof DiskImageUplaod
}, */
// 限制上传个数 @Prop() public ownertype!: string;
limit: {
type: Number, /**
default: 20 * 持久化
}, *
}, * @type {boolean}
data() { * @memberof DiskImageUplaod
return { */
// 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存） @Prop({default: false}) public persistence?: boolean;
srfuf: '0',
// 上传提示语 /**
uploadTip: `单个文件大小不超过${this.size}M，文件不超过${this.limit}个`, * 是否显示预览按钮
// 图片列表 *
imageList: [], * @type {boolean}
// headers * @memberof DiskImageUplaod
myHeaders: {Authorization: token}, */
// 表单状态事件 @Prop({default: false}) public showPreview?: boolean;
formStateEvent: Unsubscribable | undefined,
// 批量更新标识，false为不更新，true才可以更新
isUpdateBatch: true, /**
// 新建状态标识,true为新建，false为编辑 * 是否显示OCR按钮
isCreate: true, *
// 预览弹出框显示标识，true显示，false隐藏 * @type {boolean}
dialogVisible:false, * @memberof DiskImageUplaod
// 预览弹出框中的图片地址 */
dialogImageUrl:'', @Prop({default: false}) public showOcrview?: boolean;
// 存放图片的fileid,用于图片列表定位
imageFileids: [], /**
} * 单文件大小
}, *
computed: { * @type {number}
/** * @memberof DiskImageUplaod
* return action */
*/ @Prop({default: 1}) public size!: number;
getAction() {
return '/net-disk/upload/' + this.getFolder + '?ownertype=' + this.getOwnertype + '&ownerid=' + this.getOwnerid; /**
}, * 文件上传个数
/** *
* return folder * @type {number}
*/ * @memberof DiskImageUplaod
getFolder() { */
return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder); @Prop({default: 5}) public limit!: number;
},
/** /**
* return ownertype * 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
*/ *
getOwnertype() { * @type {string}
return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype); * @memberof DiskImageUplaod
}, */
/** public srfuf: string = '0';
* return ownerid
*/ /**
getOwnerid() { * 图片列表
return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid); *
} * @type {Array<any>}
}, * @memberof DiskImageUplaod
watch: {}, */
created() { public imageList: Array<any> = [];
this.formStateEvent = this.formState.subscribe(($event) => {
/**
* 当前登陆人的token
*
* @type {string}
* @memberof DiskImageUplaod
*/
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传文件请求头
*
* @type {*}
* @memberof DiskImageUplaod
*/
public myHeaders: any = {Authorization: this.token};
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskImageUplaod
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskImageUplaod
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskImageUplaod
*/
public isCreate: boolean = true;
/**
* 预览弹出框显示标识，true显示，false隐藏
*
* @type {boolean}
* @memberof DiskImageUplaod
*/
public dialogVisible: boolean = false;
/**
* 预览弹出框中的图片地址
*
* @type {string}
* @memberof DiskImageUplaod
*/
public dialogImageUrl: string = '';
/**
* 存放图片的fileid,用于图片列表定位
*
* @type {boolean}
* @memberof DiskImageUplaod
*/
public imageFileids: Array<any> = [];
/**
* 拼接上传路径
*
* @memberof DiskImageUplaod
*/
public getAction() {
return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
}
/**
* return folder
*
* @memberof DiskImageUplaod
*/
public getFolder() {
return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
}
/**
* return ownertype
*
* @memberof DiskImageUplaod
*/
public getOwnertype() {
return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
}
/**
* return ownerid
*
* @memberof DiskImageUplaod
*/
public getOwnerid() {
return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
}
/**
* vue生命周期create
*
* @memberof DiskImageUplaod
*/
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));
...@@ -175,9 +283,9 @@ ...@@ -175,9 +283,9 @@
// 直接从表单的data数据里获取当前属性的值 // 直接从表单的data数据里获取当前属性的值
if (data[this.formItemName] && this.imageList.length == 0) { if (data[this.formItemName] && this.imageList.length == 0) {
const files = JSON.parse(data[this.formItemName]); const files = JSON.parse(data[this.formItemName]);
files.forEach((item,i)=>{ files.forEach((item: any, i: number) => {
// 图片列表显示缩略图需要获取真实的图片信息 // 图片列表显示缩略图需要获取真实的图片信息
if (item.id && item.name){ if (item.id && item.name) {
this.getRealImageData(item); this.getRealImageData(item);
} }
}); });
...@@ -195,310 +303,337 @@ ...@@ -195,310 +303,337 @@
} }
} }
}); });
}, }
methods: {
/** /**
* 获取图片列表 * 获取图片列表
*/ *
getFiles() { * @memberof DiskImageUplaod
// 拼接url */
const getUrl = '/net-disk/files/' + this.getFolder; public getFiles() {
// 发送get请求 // 拼接url
Axios.get(getUrl, { const getUrl = '/net-disk/files/' + this.getFolder();
params: { // 发送get请求
ownertype: this.getOwnertype, Axios.get(getUrl, {
ownerid: this.getOwnerid, params: {
}, ownertype: this.getOwnertype(),
}).then(response => { ownerid: this.getOwnerid(),
if (!response || response.status != 200) { },
Message.error("获取图片列表失败!"); }).then(response => {
return; if (!response || response.status != 200) {
} Message.error("获取图片列表失败!");
// 返回的是一个jsonArray return;
if (response.data) { }
const files = JSON.parse(JSON.stringify(response.data)); // 返回的是一个jsonArray
if (this.imageList.length == 0) { if (response.data) {
files.forEach((item,i)=>{ const files = JSON.parse(JSON.stringify(response.data));
// 图片列表显示缩略图需要获取真实的图片信息 if (this.imageList.length == 0) {
if (item.id && item.name){ files.forEach((item: any, i: number) => {
this.getRealImageData(item); // 图片列表显示缩略图需要获取真实的图片信息
} if (item.id && item.name) {
}); this.getRealImageData(item);
} }
} });
}).catch(error => {
Message.error("获取图片列表失败:" + error);
});
},
/**
* 获取真实的图片信息
* @param fileid
*/
getRealImageData(file){
let fileData = file;
// 拼接url，与下载一致
const downloadUrl = '/net-disk/download/' + this.getFolder + '/' + fileData.id + '/' + fileData.name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': fileData.authcode
},
responseType: 'blob',
}).then(res => {
if (!res || res.status != 200) {
Message.error("下载缩略图失败!");
} }
// 请求成功，后台返回的是一个文件流 }
if (res.data) { }).catch(error => {
// 用blob对象获取文件流 Message.error("获取图片列表失败:" + error);
var blob = new Blob([res.data], {type: res.headers['content-type']}); });
// 通过文件流创建下载链接 }
var href = URL.createObjectURL(blob);
// 将下载链接保存到图片中 /**
fileData.url = href; * 获取真实的图片信息
// 保存图片fileid * @param file
if (fileData.fileid) { * @memberof DiskImageUplaod
this.imageFileids.push(fileData.fileid); */
} else if (fileData.id) { public getRealImageData(file: any) {
this.imageFileids.push(fileData.id); let fileData = file;
} else { // 拼接url，与下载一致
Message.error("图片id不存在!"); const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + fileData.id + '/' + fileData.name;
return; // 发送get请求
} Axios.get(downloadUrl, {
// 保存图片到图片列表进行显示 headers: {
this.imageList.push(fileData); 'authcode': fileData.authcode
},
responseType: 'blob',
}).then(res => {
if (!res || res.status != 200) {
Message.error("下载缩略图失败!");
}
// 请求成功，后台返回的是一个文件流
if (res.data) {
// 用blob对象获取文件流
var blob = new Blob([res.data], {type: res.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 将下载链接保存到图片中
fileData.url = href;
// 保存图片fileid
if (fileData.fileid) {
this.imageFileids.push(fileData.fileid);
} else if (fileData.id) {
this.imageFileids.push(fileData.id);
} else { } else {
Message.error('下载缩略图失败,未获取到文件!'); Message.error("图片id不存在!");
return;
} }
}).catch(error => { // 保存图片到图片列表进行显示
Message.error("下载缩略图失败:" + error); this.imageList.push(fileData);
}); } else {
}, Message.error('下载缩略图失败,未获取到文件!');
/**
*　上传之前
*/
beforeUpload(file){
// 支持上传的图片格式
if (!file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/)){
Message.error(`上传失败,仅支持＇gif，jpg，png，bmp＇格式的图片!`);
return false;
} }
// 文件大小 }).catch(error => {
const isSize = file.size / 1024 / 1024 < this.size; Message.error("下载缩略图失败:" + error);
if (!isSize) { });
Message.error(`上传失败,单个图片不得超过${this.size}M!`); }
return false;
/**
* 上传之前
* @param file
* @memberof DiskImageUplaod
*/
public beforeUpload(file: any) {
// 支持上传的图片格式
if (!file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/)) {
Message.error(`上传失败,仅支持＇gif，jpg，png，bmp＇格式的图片!`);
return false;
}
// 文件大小
const isSize = file.size / 1024 / 1024 < this.size;
if (!isSize) {
Message.error(`上传失败,单个图片不得超过${this.size}M!`);
return false;
}
}
/**
* 自定义图片上传
* @param param
* @memberof DiskImageUplaod
*/
public customImageUpload(param: any) {
// 上传的文件
let file = param.file;
// 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) {
* 自定义上传图片 let returnData = response.data;
*/ // 拼接缩略图下载url
customUploadImage(param){ const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + returnData.id + '/' + returnData.name;
// 上传的文件 // 发送get请求
let file = param.file; Axios.get(downloadUrl, {
// formData传参 headers: {
let formData = new FormData(); 'authcode': returnData.authcode
formData.append('file', file); },
// 拼接url responseType: 'blob',
const uploadUrl = this.getAction; }).then(res => {
// 发送post请求 if (!res || res.status != 200) {
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { Message.error("下载缩略图失败!");
if (!response || response.status != 200) { return;
Message.error('上传图片失败!'); }
} // 请求成功，后台返回的是一个文件流
// 返回的是一个jsonobject if (res.data) {
if (response.data) { // 用blob对象获取文件流
let returnData = response.data; var blob = new Blob([res.data], {type: res.headers['content-type']});
// 拼接缩略图下载url // 通过文件流创建下载链接
const downloadUrl = '/net-disk/download/' + this.getFolder + '/' + returnData.id + '/' + returnData.name; var href = URL.createObjectURL(blob);
// 发送get请求 // 将下载链接保存到本次上传成功后返回的jsonobject中
Axios.get(downloadUrl, { returnData.url = href;
headers: { // 保存jsonobject中的图片fileid
'authcode': returnData.authcode if (returnData.fileid) {
}, this.imageFileids.push(returnData.fileid);
responseType: 'blob', } else if (returnData.id) {
}).then(res => { this.imageFileids.push(returnData.id);
if (!res || res.status != 200) { } else {
Message.error("下载缩略图失败!"); Message.error("图片id不存在!");
return; return;
} }
// 请求成功，后台返回的是一个文件流 // 保存jsonobject到图片列表进行显示
if (res.data) { this.imageList.push(returnData);
// 用blob对象获取文件流 // 新建表单上传时，后续需要批量更新操作
var blob = new Blob([res.data], {type: res.headers['content-type']}); if (this.isCreate == true) {
// 通过文件流创建下载链接 this.isUpdateBatch = true;
var href = URL.createObjectURL(blob);
// 将下载链接保存到本次上传成功后返回的jsonobject中
returnData.url = href;
// 保存jsonobject中的图片fileid
if (returnData.fileid) {
this.imageFileids.push(returnData.fileid);
} else if (returnData.id) {
this.imageFileids.push(returnData.id);
} else {
Message.error("图片id不存在!");
return;
}
// 保存jsonobject到图片列表进行显示
this.imageList.push(returnData);
// 新建表单上传时，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// persistence=true时，需要持久化表单属性
if (this.persistence == true && this.imageList.length > 0) {
const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
} else {
Message.error('下载缩略图失败,未获取到文件!');
} }
}).catch(error => { // persistence=true时，需要持久化表单属性
Message.error("下载缩略图失败:" + error); if (this.persistence == true && this.imageList.length > 0) {
}); const value = JSON.stringify(this.imageList);
} this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}).catch(err => { }
Message.error('上传图片失败:' + err); } else {
}); Message.error('下载缩略图失败,未获取到文件!');
},
/**
*　预览
* @param file
*/
onPreview(file){
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
/**
* Ocr识别
* @param file
*/
onOcr(file) {
// 拼接url
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder + '/' + id + '/' + name + '?authcode=' + file.authcode;
// 新窗口打开url
window.open(ocrUrl);
},
/**
* 下载
* @param file
*/
onDownload(file) {
// 拼接url
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;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': file.authcode
},
responseType: 'blob',
}).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 file
*/
onRemove(file) {
if (file) {
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.imageFileids.indexOf(file.id)!=-1) {
// 要删除的图片在图片列表中的下标
const index = this.imageFileids.indexOf(file.id);
//　拼接url
const deleteUrl = '/net-disk/files/' + file.id;
// 发送delete请求
Axios.delete(deleteUrl).then(response => {
if (!response || response.status != 200) {
Message.error("删除图片失败!");
}
// 从fileid数组中删除
this.imageFileids.splice(index,1);
// 从图片列表中删除
this.imageList.splice(index, 1);
// persistence=true,时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch(error => {
// 提示删除失败
Message.error("删除图片失败:" + error);
});
} }
}).catch(error => {
Message.error("下载缩略图失败:" + error);
}); });
} }
}, }).catch(err => {
/** Message.error('上传图片失败:' + err);
* 批量更新文件表的ownerid });
*/ }
updateFileBatch(files) {
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder + '?ownertype=' + this.getOwnertype + "&ownerid=" + this.getOwnerid; /**
// requestBody参数 *　预览
let requestBody = []; * @param file
if (files) { * @memberof DiskImageUplaod
requestBody = files; */
public onPreview(file: any) {
if (file.url) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
} else {
Message.error("图片url不存在");
}
}
/**
* Ocr识别
* @param file
* @memberof DiskImageUplaod
*/
public onOcr(file: any) {
// 拼接url
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + file.authcode;
// 新窗口打开url
window.open(ocrUrl);
}
/**
* 下载
* @param file
* @memberof DiskImageUplaod
*/
public onDownload(file: any) {
// 拼接url
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;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': file.authcode
},
responseType: 'blob',
}).then(response => {
if (!response || response.status != 200) {
Message.error("下载图片失败!");
return;
} }
// 发送post请求 // 请求成功，后台返回的是一个文件流
Axios.post(updateUrl, requestBody, { if (response.data) {
headers: { // 获取文件名
"Content-Type": "application/json;charset=UTF-8" const disposition = response.headers['content-disposition'];
}, const filename = disposition.split('filename=')[1];
timeout: 2000 // 用blob对象获取文件流
}).then(response => { var blob = new Blob([response.data], {type: response.headers['content-type']});
if (!response || response.status != 200) { // 通过文件流创建下载链接
Message.error("批量更新文件失败!"); var href = URL.createObjectURL(blob);
return; // 创建一个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 file
* @memberof DiskImageUplaod
*/
public onRemove(file: any) {
if (file) {
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.imageFileids.indexOf(file.id) != -1) {
// 要删除的图片在图片列表中的下标
const index = this.imageFileids.indexOf(file.id);
//　拼接url
const deleteUrl = '/net-disk/files/' + file.id;
// 发送delete请求
Axios.delete(deleteUrl).then(response => {
if (!response || response.status != 200) {
Message.error("删除图片失败!");
}
// 从fileid数组中删除
this.imageFileids.splice(index, 1);
// 从图片列表中删除
this.imageList.splice(index, 1);
// persistence=true,时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch(error => {
// 提示删除失败
Message.error("删除图片失败:" + error);
});
} }
}).catch(error => {
Message.error("批量更新文件失败:" + error);
}); });
}, }
}, }
/**
* 批量更新文件表的ownerid
* @param files
* @memberof DiskImageUplaod
*/
public updateFileBatch(files: any) {
// 拼接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);
});
}
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或