現在在(jinsai)外包的時候,使用的是jeecg-boot專案,後端上傳使用的是自帶的JImageUpload,裡面上傳是a-upload元件,就是 Ant Design Vue框架,說實話,挺難用的。
在JImageUpload元件中:
直接上程式碼:
點選檢視程式碼
// 上傳前
beforeUpload: function(file){
this.uploadGoOn = true
const fileType = file.type
if(fileType.indexOf('image')<0){
this.$message.warning('請上傳圖片');
// 這裡預設是true uploadGoOn: true,
this.uploadGoOn = false;
return false;
// return new Promise(() => {})
}
if(file.size===0){
this.$message.warning('請確保上傳的檔案大於0MB!')
this.uploadGoOn = false;
return false;
// return new Promise(() => {})
}
// 預設為0
if(this.imgSize === "0"){
const isLt30m = file.size / 1024 / 1024 < 30
if (!isLt30m) {
this.$message.warning('請確保上傳的檔案小於30MB!');
this.uploadGoOn = false;
return false;
// return new Promise(() => {})
}
}else {
const isLt30m = file.size / 1024 / 1024 < parseInt(this.imgSize)
if (!isLt30m) {
this.$message.warning('請確保上傳的檔案小於10MB!');
this.uploadGoOn = false;
return false;
// return new Promise(() => {})
}
}
},
// 重點是這個方法 根據狀態進行判斷
async handleChange(info) {
if (!info.file.status && this.uploadGoOn === false) {
info.fileList.pop()
}
}
之前參考的帖子,但是不是這樣實現的,是:return new Promise((resolve, reject) => {}),這樣實現的
https://blog.csdn.net/weixin_55846296/article/details/123335595
https://blog.csdn.net/weixin_44647098/article/details/114836752