|
@@ -1,10 +1,11 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
- <a-upload
|
|
|
|
|
|
+ <div class="avatar-uploader">
|
|
|
|
+
|
|
|
|
+ <a-spin :spinning="loading" >
|
|
|
|
+ <a-upload
|
|
name="file"
|
|
name="file"
|
|
:data="upData"
|
|
:data="upData"
|
|
list-type="picture-card"
|
|
list-type="picture-card"
|
|
- class="avatar-uploader"
|
|
|
|
:show-upload-list="false"
|
|
:show-upload-list="false"
|
|
action="https://upload-z1.qiniup.com"
|
|
action="https://upload-z1.qiniup.com"
|
|
:before-upload="beforeAvatarUpload"
|
|
:before-upload="beforeAvatarUpload"
|
|
@@ -12,11 +13,11 @@
|
|
>
|
|
>
|
|
<img v-if="props.imgUrl" :src="props.imgUrl" alt="avatar" />
|
|
<img v-if="props.imgUrl" :src="props.imgUrl" alt="avatar" />
|
|
<div v-else>
|
|
<div v-else>
|
|
- <loading-outlined v-if="loading"></loading-outlined>
|
|
|
|
- <plus-outlined v-else></plus-outlined>
|
|
|
|
<div class="ant-upload-text">{{ title }}</div>
|
|
<div class="ant-upload-text">{{ title }}</div>
|
|
</div>
|
|
</div>
|
|
</a-upload>
|
|
</a-upload>
|
|
|
|
+ </a-spin>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -82,7 +83,8 @@ const imgSuccess = async (res, file) => {
|
|
|
|
|
|
emit("imgSuccess", img.value, file);
|
|
emit("imgSuccess", img.value, file);
|
|
console.log(img.value, qiniuData.value, "imgUrl");
|
|
console.log(img.value, qiniuData.value, "imgUrl");
|
|
- }, 1000);
|
|
|
|
|
|
+ loading.value=false
|
|
|
|
+ }, 1500);
|
|
};
|
|
};
|
|
const beforeAvatarUpload = async (file) => {
|
|
const beforeAvatarUpload = async (file) => {
|
|
console.log(file, "file");
|
|
console.log(file, "file");
|
|
@@ -92,6 +94,7 @@ const beforeAvatarUpload = async (file) => {
|
|
message.error("上传图片大小不能超过 100MB!");
|
|
message.error("上传图片大小不能超过 100MB!");
|
|
return false;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
+ loading.value=true
|
|
let mimeType = file.name.split(".").pop();
|
|
let mimeType = file.name.split(".").pop();
|
|
upData.value.key = `${qiniuData.value.prefix}img/${getToday()}.${mimeType}`;
|
|
upData.value.key = `${qiniuData.value.prefix}img/${getToday()}.${mimeType}`;
|
|
return isLt2M;
|
|
return isLt2M;
|