<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:
ant 封装的上传图片组件
最新推荐文章于 2024-02-09 23:17:09 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)