页面效果
附件上传
<Upload
class="mar-t"
ref="upload"
:show-upload-list="false"
:multiple="true"
:format="['jpg','jpeg','png', 'pdf', 'zip', 'rar', 'xls', 'docx', 'txt']"
:before-upload="handleBeforeUpload"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:on-success="handleSuccess"
:on-error="handleError"
:data="{'uuid':this.uuids}"
action="upDataUrl+'/netWork/addAtt'">
<Button type="primary" style="width:768px;margin-bottom: 20px;">添加附件</Button>
</Upload>
<Table border :columns="columns1" :data="uploadList"></Table>
export default {
data () {
return {
columns1: [
{
title: '文件名',
key: 'name'
},
{
title: '大小',
key: 'sizes'
},
{
title: '操作',
key: '',
render: (h, params) => {
return h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.deleteAttBtn(params.index);
}
}
}, '删除')
}
}
],
uploadList: [],
upDataUrl:'',
}
},
mounted (){
this.upDataUrl = RESREQUESTPREFIX;
},
methods: {
// 附件通用
handleFormatError(file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg、png、pdf、zip、rar、xls、docx、txt、格式的附件。'
});
},
handleMaxSize(file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大,不能超过 100M。'
});
},
// 生成uuid
guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
},
// 新增附件
handleBeforeUpload(file) {
// 创建一个 FileReader 对象
let reader = new FileReader();
reader.readAsDataURL(file);
},
// 附件上传成功返回
handleSuccess(response,file){
let reader = new FileReader();
const _this = this;
reader.formatBytes = function(a,b){
if(0==a)return"0 Bytes";
var c = 1024,
d = b||2,
e = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],
f = Math.floor(Math.log(a)/Math.log(c));
return parseFloat((a/Math.pow(c,f)).toFixed(d))+" "+e[f];
};
//reader.onloadend = function (e) {
// 限制100MB
if(file.size < 104857600){
file.sizes = reader.formatBytes(file.size);
file.url = reader.result;
console.log(111)
console.log(file)
_this.uploadList.push(file);
};
//};
console.log(_this.uploadList)
this.responseData = response;
for(var i=0; i<response.length; i++){
var fileUaId = response[i].uaId;
};
this.uaIds.push(fileUaId);
console.log(this.uaIds)
this.$Message.success('附件上传成功');
},
// 新增失败
handleError(error,file){
console.log(file);
},
// 删除附件
deleteAttBtn(index, file) {
let deleteUaId = this.responseData[index].uaId;
let url = RESREQUESTPREFIX +'/netWork/deleteAnnexByUaid?uaId=' + deleteUaId;
this.$http.delete(url).then(function(response){
if(response.status === 200){
this.$Message.success('删除成功');
this.uploadList.splice(index, 1);
};
}, function () {
this.$Message.error('删除失败,请检查接口是否正常!');
// 失败回调
});
},
// 附件下载
downLoad(row){
console.log(row)
// 取当前路径
let uaId = row.uaId;
let filename = row.uaName;
let url = RESREQUESTPREFIX+"/netWork/filename="+ filename + '?&uaId=' + uaId;
this.$http.get(url).then(function(response){
this.content = response.data;
const blob = new Blob([this.content])
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE10
navigator.msSaveBlob(blob, filename)
} else {
// chrome/firefox
let aTag = document.createElement('a')
aTag.download = filename;
aTag.href = URL.createObjectURL(blob)
aTag.click()
URL.revokeObjectURL(aTag.href)
}
},function(response){
// 发生错误
this.$Message.error('下载失败,请检查接口是否正常!');
});
},
}
}