ant design vue 檔案上傳
阿新 • • 發佈：2022-03-30
<template>
<a-modal
:visible="modalValue.visible"
title="上傳"
width="38%"
:maskClosable="false"
@ok="handleOk"
@cancel="handleCancel"
>
<a-upload-dragger
accept=".csv"
:multiple="false"
action
:before-upload="beforeUpload"
:file-list="fileList"
>
<p class="ant-upload-drag-icon">
<img style="width: 40px; height: 53px" src="@/assets/upload.png" />
</p>
<p class="ant-upload-text">點選或者拖拽匯入檔案進行上傳</p>
<p class="ant-upload-hint">
(只支援csv檔案，編碼格式需為GB2312格式)
</p>
</a-upload-dragger>
</a-modal>
</template>
<script> import { uploadFile, downloadFile } from '@/api/searchoperation' import downloader from 'downloadjs' import { mapGetters } from 'vuex' export default { props: { modalValue: {}, }, data() { return { fileList: [], data: {}, name: '', } }, computed: { ...mapGetters(['adcode']), }, methods: { beforeUpload(file) { return new Promise((resolve, reject) => { let type = file.name.toLowerCase().substr(file.name.lastIndexOf('.')) if (type != '.csv') { this.$message.warning('請上傳csv檔案') return reject(false) } this.fileList = [...this.fileList, file].slice(0, 1) return false }) }, handleOk() { if (this.fileList.length == 0) { this.$message.warn('請上傳檔案') return } else { const that = this const fd = new FormData() this.fileList.forEach(file=>{ fd.append('files', file) }) fd.append('userName', JSON.parse(localStorage.getItem("pro__Login_Username")).value) uploadFile(fd).then((res) => { if (res.code == "200"||res.status == "0") { that.$message.success('上傳成功') that.modalValue.visible = false that.$emit('updatetable') } else { that.$message.error(res.description||res.message) } }) this.fileList = [] } }, handleCancel() { this.modalValue.visible = false this.fileList = [] }, }, } </script>
<style> </style>
<script> import { uploadFile, downloadFile } from '@/api/searchoperation' import downloader from 'downloadjs' import { mapGetters } from 'vuex' export default { props: { modalValue: {}, }, data() { return { fileList: [], data: {}, name: '', } }, computed: { ...mapGetters(['adcode']), }, methods: { beforeUpload(file) { return new Promise((resolve, reject) => { let type = file.name.toLowerCase().substr(file.name.lastIndexOf('.')) if (type != '.csv') { this.$message.warning('請上傳csv檔案') return reject(false) } this.fileList = [...this.fileList, file].slice(0, 1) return false }) }, handleOk() { if (this.fileList.length == 0) { this.$message.warn('請上傳檔案') return } else { const that = this const fd = new FormData() this.fileList.forEach(file=>{ fd.append('files', file) }) fd.append('userName', JSON.parse(localStorage.getItem("pro__Login_Username")).value) uploadFile(fd).then((res) => { if (res.code == "200"||res.status == "0") { that.$message.success('上傳成功') that.modalValue.visible = false that.$emit('updatetable') } else { that.$message.error(res.description||res.message) } }) this.fileList = [] } }, handleCancel() { this.modalValue.visible = false this.fileList = [] }, }, } </script>
<style> </style>