ant 封装的上传图片组件

最新推荐文章于 2024-02-09 23:17:09 发布

范闲~

最新推荐文章于 2024-02-09 23:17:09 发布

阅读量264

点赞数

分类专栏： ant vue3 文章标签：前端 javascript java

本文链接：https://blog.csdn.net/m0_60708088/article/details/125447879

版权

本文介绍了如何使用 Ant Design 的上传组件进行封装，详细阐述了在前端使用 JavaScript 实现图片上传功能的过程，并探讨了与后端 Java 接口的交互细节。

摘要由CSDN通过智能技术生成

<template>
  <div class="image-upload-oss">
    <!-- 存放图片 -->
    <div
      v-for="(img, index) in data.uploadList"
      :key="index"
      class="up-image"
      :class="{ 'up-circle': circle }"
      :style="{ width: width + 'px', height: height + 'px' }"
    >
      <delete-icon class="delete-img" @click="deleteImg(index)" />
      <!-- @click="deleteImg(index)" -->
      <img :src="img" alt="" />
    </div>
    <!-- 上传图片的input  multiple多文件上传  webkitdirectory文件夹上传  -->
    <input
      type="file"
      class="up"
      :accept="acceptstr"
      style="display: none"
      :multiple="data.multiple"
      @change="uploadFile"
    />
    <!-- 上传按钮 -->
    <div
      v-if="data.uploadList.length < maxNum"
      class="update-click"
      :class="{ 'up-circle': circle }"
      :style="{ width: width + 'px', height: height + 'px' }"
      @click="openFileUpload"
    >
      <!-- <photo-icon /> -->
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, onMounted, watch } from 'vue';
  import axios from 'axios';
  import DeleteIcon from './icon/DeleteIcon.vue';
  // import PhotoIcon from './icon/PhotoIcon.vue';

  interface DataConfig {
    uploadList: any;
    multiple: any;
    uploadUrl: any;
    formData: any;
  }

  // interface fromDataConfig {
  //   OSSAccessKeyId: any
  //   dir: any
  //   key: any
  //   alioss: any
  //   success_action_status: any
  // }
  export default defineComponent({
    components: {
      DeleteIcon,
      // PhotoIcon,
    },
    props: {
      circle: {
        type: Boolean,
        default: false,
      },
      // 需要改变的img,传给上层的
      img: