Arco Design vue3+typescript图片上传七牛云

鱼鱼鱼BOL

于 2024-05-01 23:41:24 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： arco design typescript 状态模式

本文链接：https://blog.csdn.net/only_learn/article/details/138382674

本文介绍了如何在Vue3项目中结合TypeScript和Arcodesign的文件上传组件，配合OpenAPI生成前端API，实现在前端上传文件到七牛云并处理上传过程中的错误和进度显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境

vue3+typescript+arcodesign vue+openapi生成接口

需求

前端使用arco design 的文件上传组件a-upload上传到七牛云进行对象存储，前端api由openapi生成

template

<a-upload
                  action="/"
                  name="file"
                  :fileList="file ? [file] : []"
                  :show-file-list="false"
                  @change="onChange"
                  @progress="onProgress"
                >
                  <template #upload-button>
                    <div
                      :class="`arco-upload-list-item${
                        file && file.status === 'error'
                          ? ' arco-upload-list-item-error'
                          : ''
                      }`"
                    >
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="file && file.url"
                      >
                        <img :src="file.url" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>

最低0.47元/天解锁文章