有个修改用户头像的需求,将头像传到图床然后获取到链接进行回显,大概效果如下:
前端使用acro design的upload组件,阻止auto-upload,通过@change来发送请求,代码如下:
<a-form-item field="userAvatar">
<a-upload
:multiple="false"
:show-file-list="false"
:list-type="'picture-card'"
action="#"
:auto-upload="false"
@change="Onchange"
>
<template #upload-button>
<div
v-if="form.userAvatar"
class="arco-upload-list-picture custom-upload-avatar"
>
<img :src="form.userAvatar" />
<div class="arco-upload-list-picture-mask">
<IconEdit />
</div>
<a-progress
v-if="file && file.status === 'uploading' && file.percent < 100"
:percent="file.percent"
type="circle"
size="mini"
:style="{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateX(-50%) translateY(-50%)',
}"
/>
</div>
<div class="arco-upload-picture-card" v-else>
<div class="arco-upload-picture-card-text">
<IconPlus />
<div style="margin-top: 10px; font-weight: 600">Upload</div>
</div>
</div>
</template>
</a-upload>
</a-form-item>
typescript代码如下:
const file = ref();
const Onchange = async (_: any, currentFile: FileItem) => {
file.value = currentFile;
// 发送请求给后端
const res = await FileControllerService.uploadFileUsingPost(
"user_avatar",
currentFile?.file
);
if (res.code === 0) {
form.userAvatar = res.data;
}
};
最后效果如图: