Ant Design Upload 文件上傳功能的實現(xiàn)
更新時間：2023年04月21日 15:57:19 作者：丶酸酸
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、Ant Design Vue文件上傳功能
1.文件上傳選項框
<a-modal
title="上傳文件"
:footer="null"http://不顯示底部按鈕
:visible="visible"http://是否顯示
:confirmLoading="confirmLoading"http://確定按鈕 loading
@cancel="handleCancel"http://取消方法
>
<a-upload
:fileList="fileList"http://上傳的文件列表
:remove="handleRemove"http://文件刪除方法
:beforeUpload="beforeUpload"http://上傳文件之前的鉤子，參數(shù)為上傳的文件
>
<a-button>
<a-icon type="upload" />選擇文件
</a-button>
</a-upload>
</a-modal>
<div class="streetAdd">
<a-button type="primary" icon="plus" @click="engineeringadd()">新增</a-button>
<a-button type="primary" icon="file" @click="showModal()">數(shù)據(jù)導入</a-button>
</div>
效果：
2.js實現(xiàn)代碼
//定義的變量
<script>
export default {
data() {
return {
visible: false,
confirmLoading: false,
fileList: [],
IpConfig: this.IpConfig.projectServiceDomain,
}
},
mounted: function () {
this.engineeringList()
//that.alarmTypes=res.data.res.dictionaryList;
},
methods: {
//點擊數(shù)據(jù)導入按鈕所調(diào)用的方法
showModal() {
this.visible = true
},
//對話框確認方法
handleOk(e) {
this.visible = false
this.confirmLoading = false
},
//關閉彈框
handleCancel(e) {
//console.log('Clicked cancel button')
this.visible = false
},
//刪除上傳文件
handleRemove(file) {
const index = this.fileList.indexOf(file)
const newFileList = this.fileList.slice()
newFileList.splice(index, 1)
this.fileList = newFileList
},
//顯示上傳文件內(nèi)容
beforeUpload(file) {
this.spinning = true
var that = this
that.visible = false
//文件類型
var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
if (fileName != 'xlsx' && fileName != 'xls') {
this.$message.error('文件類型必須是xls或xlsx!')
this.spinning = false
that.visible = true
return false
}
//讀取文件大小
var fileSize = file.size
//console.log(fileSize)
if (fileSize > 1048576) {
this.$message.error('文件大于1M!')
this.spinning = false
that.visible = true
return false
}
let fd = new FormData()//表單格式
fd.append('file', file)//添加file表單數(shù)據(jù)
let url = this.IpConfig + '/xing/jtGongLuShouFeiZhan/upload'
this.$ajax({
method: 'post',
url: url,
data: fd,
headers: {
'Content-Type':
'multipart/form-data;boundary=' + new Date().getTime(),
},
})
.then((rsp) => {
console.log(rsp)
let resp = rsp.data
if (rsp.status == 200) {
that.fileList = []
that.visible = false
that.confirmLoading = false
that.$message.success('文件上傳成功!')
this.spinning = false
} else {
this.$message.error('文件上傳失敗!')
that.visible = true
}
})
.catch((error) => {
this.$message.error('請求失敗! error:' + error)
this.spinning = false
that.visible = true
})
return false
}
}
}
</script>
二、Ant Design React文件上傳功能
1.文件上傳選項框
render() {
const upLoad = {
name: 'files',
action: 'http://192.168.0.102:7072/folder/annex/upload',//文件上傳地址
headers: {
authorization: 'authorization-text',
},
onChange: this.handleChange.bind(this),//上傳文件改變時的狀態(tài)
showUploadList: false,//是否展示文件列表
}
const { page, pages, fileType } = this.state;
return (<React.Fragment>
<div className={styles.tableBtnBox}>
<Button disabled={this.state.showBtn} type="primary">新建</Button>
<Button
disabled={this.state.showBtn} //是否可用
onClick={this.onUpload.bind(this)} //點擊方法
className={styles.uploadBtn} //樣式
type="primary"
ghost
>上傳</Button>
</div>
<Modal
title="文件上傳"
visible={this.state.uploadState}//是否顯示
onOk={this.handleOk.bind(this)}//確認方法
onCancel={this.handleCancel.bind(this)}//取消方法
>
<Dragger {...upLoad}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">單擊或拖動文件到此區(qū)域以上傳</p>
</Dragger>,
</Modal>
</React.Fragment>)
}
效果：
2. js實現(xiàn)代碼
//點擊上傳按鈕方法
onUpload() {
this.setState({
uploadState: true,
})
}
//文件上傳
handleChange(info) {
var fileSize = info.file.size;
if (info.file.status === 'done') {
if (info.file.response.code === 500) {
message.error('上傳文件失敗');
return
}
let response = info.file.response.res[0];
if (response.suffix == 'xlsx' || response.suffix == 'docx' || response.suffix == 'pdf') {//當文件類型是xlsx，docx，pdf三種格式時
let userid = Number(localStorage.getItem('userid'));
const baseUrl = 'http://192.168.0.123:8889';
const api = '/zhyjxxzhpt/file/upload';
let fd = new FormData();//表單格式
fd.append("userid", userid);//添加userid數(shù)據(jù)
fd.append("id", response.id);//添加id數(shù)據(jù)
fd.append("name", response.name);//添加name數(shù)據(jù)
fd.append("suffix", response.suffix);//添加suffix數(shù)據(jù)
fd.append("type", response.type);//添加type數(shù)據(jù)
axios({
url: baseUrl + api,//文件數(shù)據(jù)保存的地址
method: "post",
data: fd,
headers: {
"Content-Type": "multipart/form-data;boundary=" + new Date().getTime()
}
}).then(res => {
if (res.data.code == 'success') {
message.success(`${response.name} 文件上傳成功！`);
}
this.queryPrivate();
})
} else {
message.error(`只能上傳xlsx,docx,pdf文件！`);
return false
}
} else if (info.file.status === 'error') {
if (fileSize > 1048576) {
message.error(`${info.file.name}文件大于1M!`);
} else {
message.error(`${info.file.name} 文件上傳失敗！`);
}
}
}
//點擊確定按鈕方法
handleOk = e => {
this.setState({
uploadState: false,
});
};
//取消方法
handleCancel = e => {
this.setState({
uploadState: false,
});
};
總結
寫在最后：
上述代碼均是自己在開發(fā)過程中總結出來，或許還有不足之處，但是希望有些內(nèi)容能夠幫到大家，也希望大家多多支持腳本之家。
相關文章
vue+vant使用圖片預覽功能ImagePreview的問題解決
這篇文章主要介紹了vue+vant使用圖片預覽功能ImagePreview的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了Vue v2.5 調(diào)整和更新不完全問題的相關資料,需要的朋友可以參考下2017-10-10
面包屑功能是我們在項目中經(jīng)常遇到的功能，今天小編使用Element-UI 進行實現(xiàn)在vue項目中實現(xiàn)面包屑功能，具體實現(xiàn)方式大家跟隨小編一起學習吧2019-07-07
上傳文件，基本上用了input框就可以解決，但大文件應該怎樣上傳呢，一次性上傳明顯不現(xiàn)實，因為每次一斷網(wǎng)，那就會從頭開始上傳，所以切片勢在必行，關鍵就是如何切，怎么保障文件數(shù)據(jù)不會丟失，同時優(yōu)化上傳保障機制，本文就來給大家講講如何上傳大文件2023-07-07
詳解使用VUE搭建后臺管理系統(tǒng)(vue-cli更新至3.0)
這篇文章主要介紹了詳解使用VUE搭建后臺管理系統(tǒng)(vue-cli更新至3.0),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue相同路由跳轉強制刷新該路由組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue?服務端渲染SSR示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了vue頁面切換項目實現(xiàn)轉場動畫的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
下面小編就為大家分享一篇淺談VUE監(jiān)聽窗口變化事件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02