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" style="font-size: 12px;"/>{{ 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("確認操作");
                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.warning(error.response);
      });
     
    },
    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>