vue3 ant-vue form表单里的upload组件封装

最新推荐文章于 2024-06-26 14:17:54 发布

原创最新推荐文章于 2024-06-26 14:17:54 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

vue3 专栏收录该内容

6 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue项目中利用Ant Design Vue组件库实现图片上传功能，包括设置上传限制（如文件类型、大小）、上传状态显示（如加载中、上传成功、上传失败）以及回调函数的使用，帮助开发者更好地理解和实现在前端进行图片上传的逻辑。

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

<template>
  <a-upload
    v-model:file-list="fileList"
    name="file"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    :action="action"
    :before-upload="beforeUpload"
    @change="handleChange"
    v-bind="$attrs"
  >
    <a-image
      :width="48"
      :height="48"
      v-if="value" :src="value"
    />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
    </div>
  </a-upload>
</template>
<script>
import { defineComponent, ref, watch } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  props:['value'],
  inheritAttrs: false,
  emits:['update:value'],
  setup(props,{emit}) {
    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref();
    const action = ref(`http://192.168.2.2:8080/uplaodurl`);
    const handleChange = info => {
      if (info.file.status === 'uploading') {
        loading.value = true;
        return;
      }

      if (info.file.status === 'done') {
          loading.value = false;
        if(info.file.response.code==0){
          emit('change',info)
          imageUrl.value = info.file.response.data;
        }
      }

      if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
      }
    };

    const beforeUpload = file => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

      if (!isJpgOrPng) {
        message.error('You can only upload JPG file!');
      }

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
      }

      return isJpgOrPng && isLt2M;
    };
    watch(imageUrl, (newValue, oldValue) => {
      emit('update:value', newValue)
    });
    return {
      fileList,
      loading,
      imageUrl,
      action,
      handleChange,
      beforeUpload,
    };
  },
});
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 64px;
  height: 64px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>