添加文件上传下载功能

hyingbo

2025-05-30 eaca9cc0cacf52c3ae88e6ae8fe6e3fdb88480cc

添加文件上传下载功能

 src/views/base/FileDownAndImport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,178 @@
<template>
  <a-card :bordered="false">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="文件名称">
              <j-input placeholder="请输入文件名称" v-model="queryParam.fileName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- æŸ¥è¯¢åŒºåŸŸ-END -->

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button @click="handleAdd()" type="primary" icon="import">上传</a-button>

      <a-table
        ref="table"
        size="middle"

        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleDownload(record)">下载</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
        </span>
      </a-table>
    </div>
    <file-import-module ref="fileImportModule" @ok="getTreeDataByApi" />
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { downFile } from '@/api/manage'
import FileImportModule from '@views/base/modules/file/FileImportModule'

export default {
  name: 'FileDownAndImport',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
    FileImportModule
  },
  data () {
    return {
      description: '文件列表',
      // è¡¨å¤´
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'文件名称',
          align:"center",
          dataIndex: 'fileName'
        },
        {
          title:'文档后缀',
          align:"center",
          dataIndex: 'fileSuffix'
        },
        {
          title:'上传人',
          align:"center",
          dataIndex: 'createBy_dictText'
        },
        {
          title:'上传时间',
          align:"center",
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/nc/doc/list",
        delete: "/nc/doc/delete",
        download: "/nc/doc/download",
      },
      dictOptions:{},
      superFieldList:[],
    }
  },
  created() {
    this.getSuperFieldList();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    initDictConfig(){
    },
    handleOk() {
      this.loadData();
    },
    getSuperFieldList(){
      let fieldList=[];
      fieldList.push({type:'string',value:'fileName',text:'文件名称',dictCode:''})
      this.superFieldList = fieldList
    },
    // ä¸‹è½½å½“前右键选中文档
    handleDownload(record) {
      const that = this
      downFile(this.url.download, { id: record.id })
        .then(res => {
          if (!res) {
            this.$message.warning('文件下载失败')
            return
          } else {
            let fileName = record.fileName  + "." + record.fileSuffix;
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
              window.navigator.msSaveBlob(new Blob([res]), fileName);
            } else {
              let url = window.URL.createObjectURL(new Blob([res]));
              let link = document.createElement('a');
              link.style.display = 'none';
              link.href = url;
              link.setAttribute('download', fileName);
              document.body.appendChild(link);
              link.click()
              document.body.removeChild(link) //下载完成移除元素
              window.URL.revokeObjectURL(url) //释放掉blob对象
            }
          }
        })
    },
    handleAdd() {
      this.$refs.fileImportModule.upload();
      this.$refs.fileImportModule.title="导入"
    },
    getTreeDataByApi(){
      this.loadData();
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

 src/views/base/modules/file/FileImportModule.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
<template>
  <a-modal :title="title" :visible="visible" @cancel="handleModalClose" :maskClosable="false">
    <a-upload :multiple="true" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" >
      <a-button type="primary" :disabled="uploading">
        <a-icon type="import"/>
        é€‰å–文件
      </a-button>
    </a-upload>

    <template slot="footer">
      <a-button @click="handleModalClose">取消</a-button>
      <a-button
        id="custom-upload-button"
        type="primary"
        :disabled="fileList.length === 0"
        :loading="uploading"
        @click="handleUpload"
      >
        ç¡®è®¤
      </a-button>
    </template>

  </a-modal>
</template>

<script>
import JUpload from '@/components/jeecg/JUpload'
import { getAction, postAction, uploadAction } from '@/api/manage'

export default {
  name: 'FileImportModule',
  components: {
    JUpload,
  },
  data() {
    return {
      visible: false,
      title: '',
      id:'',
      fileList: [],
      uploadParams: {},
      uploading: false,
      isUploadMultiple: true,
      currentDeviceDocClassCode: 'SEND',
      currentTitleAfterClass: '',

      url: {
        add: "/nc/doc/add",
      }
    }
  },

  created() {
  },
  methods: {

    /**
     * é€‰æ‹©å¥½æ–‡ä»¶ç‚¹å‡»ç¡®å®šåŽ
     * @param file æ–‡ä»¶å¯¹è±¡
     */
    beforeUpload(file) {
      if (this.isUploadMultiple) {
        if (!this.fileList.find(item => item.name === file.name)) this.fileList = [...this.fileList, file]
      } else this.fileList.splice(0, 1, file)
      return false
    },

    /**
     * åˆ é™¤æ–‡ä»¶åˆ—表项时触发
     * @param file æ–‡ä»¶å¯¹è±¡
     */
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },

    // æŽ§åˆ¶æ–‡ä»¶ä¸Šä¼ çª—口关闭并清空文件列表
    handleModalClose() {
      this.visible = false
      this.fileList = []
    },

    upload(){
      this.isUploadMultiple = true
      this.visible = true
    },
    handleUpload() {
      const { fileList, $notification, handleModalClose} = this
      this.uploading = true
      let uploadedFileCount = 0
      let uploadSuccessFileCount = 0
      if (this.fileList.length === 0) {
        this.$message.info("请上传文件")
        this.uploading = false;
      }
      fileList.forEach((file, index) => {
        const formData = new FormData()
        formData.append('file', file)
        uploadAction(this.url.add, formData).then(res => {
          if (res.success) {
            file.status = 'done'
            uploadSuccessFileCount++
            $notification.success({
              message: '消息',
              description: res.message
            })
          } else {
            file.status = 'error'
            $notification.error({
              message: '消息',
              description: res.message
            })
          }
        })
          .catch(err => {
            file.status = 'error'
          })
          .finally(() => {
            uploadedFileCount++
            fileList.splice(index, 1, file)
            if (uploadedFileCount === fileList.length) {
              if (uploadSuccessFileCount > 0) {
                this.$emit('ok')
              }
              // å½“文件全部上传完成后
              if (uploadSuccessFileCount === fileList.length) {
                handleModalClose();
              }
              this.uploading = false
            }
          })
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-btn-primary#custom-upload-button {
  color: #fff;
  background-color: #67C23A;
  border-color: #67C23A;

  &[disabled] {
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    border-color: #d9d9d9;
  }
}
</style>