uniapp上传图片功能

不吃鱼皮

已于 2022-08-26 09:20:08 修改

阅读量1.4k

点赞数 3

文章标签： uni-app 前端 servlet

于 2022-08-24 14:30:41 首次发布

本文链接：https://blog.csdn.net/weixin_45818290/article/details/126503873

版权

效果图

在components中创建一个组件UploadOpinionImg.vue

<template>
	<view class="sunui-uploader-bd">
		<view class="sunui-uploader-files">
			<block v-for="(item, index) in upload_before_list" :key="index">
				<view class="sunui-uploader-file" :class="[item.upload_percent < 100 ? 'sunui-uploader-file-status' : '']" @click="previewImage(index)">
					<!-- step1.这里修改服务器返回字段 ！！！ -->
					<image class="sunui-uploader-img" :style="upload_img_wh" :src="item.path" mode="aspectFill" />
					<view class="sunui-img-removeicon right" @click.stop="removeImage(index)" v-show="upimg_move">×</view>
					<!-- <view class="sunui-loader-filecontent" v-if="item.upload_percent < 100">{
  { item.upload_percent }}%</view> -->
				</view>
			</block>
			<!-- 单图上传 -->
			<block v-if="flag && upload_before_list.length < 1">
				<view  hover-class="sunui-uploader-hover" class="sunui-uploader-inputbox" @click="chooseImage" :style="upload_img_wh">
					<view class="center-con">
						<text class="iconfont icon-mn_shangchuantupian" style="color: #666;"></text>
						<text>上传图片</text>
					</view>
				</view>
			</block>
			<!-- 多图上传,且只能四张 -->
			<block v-else-if="!flag &&  upload_before_list.length < 4"> 
				<view  v-if="!flag" hover-class="sunui-uploader-hover" class="sunui-uploader-inputbox" @click="chooseImage" :style="upload_img_wh">
					<view class="center-con">
						<text class="iconfont icon-mn_shangchuantupian" style="color: #666;"></text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template