uniapp-图片上传组件

最新推荐文章于 2024-04-18 17:58:31 发布

乾卦三爻

最新推荐文章于 2024-04-18 17:58:31 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签：编辑器前端

本文链接：https://blog.csdn.net/weixin_46325225/article/details/126540377

版权

效果图

在这里插入图片描述

easy-upload.vue

<template>
	<view>
		<view class="upload">
			<block v-for="(upload,index) in uploads" :key="index">
				<view class="uplode-file">
					<image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image>
					<view v-if="types == 'image'" class="clear-one-icon" @tap="delImage(index)"><span class="icon iconfont">&#xe657;</span> </view>
					<video v-if="types == 'video'" class="uploade-img" :src="upload" controls>
						<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
					</video>
				</view>
			</block>
			<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">
				<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
				<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
			</view>
		</view>	
		<!-- <button type="primary" v-if="types == 'image'" @tap="upload">上传</button> -->
	</view>
</template>

<script>
	import api from "@/api/http.js";
	export default{
   
		props: {
   
			types: {
   
				type: String,
				default: 'image'
			},
			dataList: {
   
				type: Array,
				default: function() {
   
					return []
				}
			},
			clearIcon: {
   
				type: String,
				default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
			},
			uploadIcon: {
   
				type: String,
				default: ''
			},
			uploadUrl: {
   
				type: String,
				default: ''
			},
			deleteUrl: {
   
				type: String,
				default: ''
			},
			uploadCount