antdVue--Upload使⽤
1.实现功能：⽂件上传、下载以及删除不过API中的下载监听⽅法download⼀直没有触发，(不确定是我写的有问题还是咋地，反正就是触发不了下载)随⽤预览的监听⽅法preview来实现了下载。
组件调⽤
            <new-upload
ref="upDataMout"
:uploadActionUrl="url.uploadAction"
:urlDownload="url.urlDownload"
:deleteUrl="url.deleteUrl"
@uploadFile="uploadFile"
>
            </new-upload>
⾃定义上传组件
<template>
<a-upload
name="file"
:multiple="true"
:disabled="disabled"
:file-list="fileList1"
@change="handleUpload"
@preview="download"
:remove="handleRemove"
:before-upload="beforeUpload"
:
showUploadList="{
showDownloadIcon:true,
showRemoveIcon:true
}"
>
<a-button size="small"><a-icon type="upload" />{{ text }}</a-button>
</a-upload>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import {postAction} from '@/api/analysis.js' //接⼝请求的⽂件
const FILE_TYPE_ALL = "all"
export default {
name: 'JUpload',
data(){
return {
formData:{},//接⼝传参
fileList1: [],
filedirList:[],
nameList:[],
uploading: false,
}
},
props:{
text:{
type:String,
required:false,
default:"点击上传"
},
fileType:{
type:String,
required:false,
default:FILE_TYPE_ALL
},
value:{
type:[String,Array],
required:false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
disabled:{
type:Boolean,
required:false,
default: false
},
// ⽤于动态传参修改上传路径
uploadActionUrl:{
type:String,
required:false,
default:"",
},
// 下载地址的动态传参
urlDownload:{
type:String,
required:false,
default:"",
},
deleteUrl:{//删除⽂件的接⼝
type:String,
required:false,
default:"",
}
},
methods:{
uidGenerator(){//随机⽣成
return '-'+parseInt(Math.random()*10000+1,10);
},
add(){//新增原来⽼数据清空
this.$nextTick(() => {
this.fileList1 = [];
this.filedirList = [];
this.nameList = [];
})
},
edit(recode){//编辑⽂件回显
console.log("编辑1111",recode);
const data = recode;
const fileName = data.fileName?data.fileName.split(","):[];
const filedir=data.folderId?data.folderId:'';
this.fileList1 = [];
let fileList = [],filedirList=[];
for(var a=0;a<fileName.length;a++){
fileList.push({
uid:this.uidGenerator,
name:fileName[a],
status: 'done',
url: filedir,
response:{
status:"history",
message:filedir
}
});
filedirList.push(filedir);
}
this.$nextTick(() => {
this.fileList1 = fileList;
this.filedirList = filedirList;
this.nameList = fileName;
})
},
handleRemove(file) {//删除⽂件
this.$confirm("确认删除该⽂件？",{
type:'error'}).then(()=>{
console.log("确认操作");
antdesignvue 配置外部文件const index = this.fileList1.indexOf(file);
const newFileList = this.fileList1.slice();
newFileList.splice(index, 1);//把当前的⽂件删除
this.fileList1 = newFileList;
const fileName = file.name;
const filedir = this.filedirList[index];//⽂件地址数组
let newPathList = this.filedirList.slice();
newPathList.splice(index,1);//删除当前⽂件名
this.filedirList = newPathList;
let newNameList = this.nameList.slice();
newNameList.splice(index,1);//删除当前⽂件名
this.nameList = newNameList;
let url = `${this.deleteUrl}?fileName=${fileName}&filedir=${filedir}`;                let that = this;
postAction(url).then((res) => {
if(res.status==1) {
let paras={
'fileName':newNameList,
'filedir':that.filedirList[0]
}
that.$emit('uploadFile', paras);//⽂件数据传给⽗组件
that.$message.success(`删除成功!`);
}
})
}).catch(()=>{
console.log("取消操作");
})
},
beforeUpload(file) {
this.fileList1 = [...this.fileList1, file];
return false;
},
handleUpload(file) {//⽂件上传监听
console.log("file:",file);
const { fileList1,filedirList,nameList } = this;
const formData = new FormData();
fileList1.forEach(file => {
formData.append('files', file); //⽂件上传的时候传参
if(file.status!="done" && fileList1.length>1){
formData.append('filedir', filedirList[0]); //⽂件上传的时候传参
}
});
this.uploading = true;
let that  =this;
if(file.file.status=="removed"){//删除状态
return;
}
//⽂件上传接⼝请求
axios({
method: "POST",
url: `${this.uploadActionUrl}`,
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function(res) {
if(res.status==200){
const data = res.data;
let path = filedirList,name = nameList;
path.push(data.filedir);
name.push(file.file.name);
that.nameList = name;
/
/⽂件夹id,⼀个任务⼀个id即同⼀个新增上传多个⽂件都是同⼀个id
that.filedirList = path;
console.log("path:",that.filedirList);
that.fileList1[that.fileList1.length-1].url=data.filedir;//接⼝返回的上传路径
that.fileList1[that.fileList1.length-1].status="done";//必须该状态下才可以预览和下载            that.$message.success(`${data.fileName} 上传成功!`);
let paras={
'fileName':nameList,
'filedir':that.filedirList[0]
}
that.$emit('uploadFile', paras);//⽂件数据传给⽗组件
}
console.log(res);
}).catch(function(error){
console.log(error);
this.$message.sponse);
});
},
download(file){//下载⽂件
// console.log("fileL:",file);
const index = this.fileList1.indexOf(file);
const filedir=this.filedirList[index];
const that = this;
let url = `${this.urlDownload}?fileName=${file.name}&filedir=${filedir}`;
window.open(url);//下载⽂件
},
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。