Vue3 + Acro-Design上传图片回显

2023-12-13 03:27:42

?有个修改用户头像的需求，将头像传到图床然后获取到链接进行回显，大概效果如下：

前端使用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;
  }
};

?最后效果如图：

文章来源:https://blog.csdn.net/m0_54409739/article/details/134889798
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。