uniapp小程序上传图片

上传图片

<template>
	<view class="content">	
		<!-- file -->
		<view class="uni-file-picker__container">
			<view class="file-picker__box" v-for="(item,index) in pictures" :key="index" >
				<view class="file-picker__box-content">
					<image :src="item" class="file-image" mode="aspectFill" @click="previewImage(index)"></image>
					<view class="icon-del-box" @click="delFile(index)">
						<view class="icon-del"></view>
						<view class="icon-del rotate"></view>
					</view>
				</view>
			</view>
			<!-- add -->
			<view class="file-picker__box" @click="upload" v-if="pictures.length!=3">
				<view class="file-picker__box-content is-add">
					<view class="is-add">
						<view class="icon-add"></view>
						<view class="icon-add rotate"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

style

自定义上传按钮以及图片框

scss

// 自定义上传样式
.uni-file-picker__container {
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    margin: -5px;
	.file-picker__box {
	    position: relative;
	    width: 33.3%;
	    height: 0;
	    padding-top: 33.33%;
	    box-sizing: border-box;
		.file-picker__box-content {
		    position: absolute;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    left: 0;
		    margin: 5px;
		    border: 1px #eee solid;
		    border-radius: 5px;
		    overflow: hidden;
		}
		.file-picker__box-content{
			border-width: 1px;
			border-style: solid;
			border-color: #eee;
			border-radius: 3px;
		}
		.is-add {
		    display: flex;
		    align-items: center;
		    justify-content: center;
			.icon-add {
			    width: 50px;
			    height: 5px;
			    background-color: #f1f1f1;
			    border-radius: 2px;
			}
			.rotate {
			    position: absolute;
			    -webkit-transform: rotate(90deg);
			    transform: rotate(90deg);
			}
		}
		
	}
}
// 图片
.file-image {
    width: 100%;
    height: 100%;
}
// 删除图标
.icon-del-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3px;
    right: 3px;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	.icon-del {
	    width: 15px;
	    height: 2px;
	    background-color: #fff;
	    border-radius: 2px;
	}
	.rotate {
	    position: absolute;
	    -webkit-transform: rotate(90deg);
	    transform: rotate(90deg);
	}
}

script

var _self;
export default {
	components:{
		
	},
	data() {
		return {
			pictures:[],
		}
	},
	onLoad() {
		_self = this;
	},
	onShow() {
		
	},
	methods: {
		//预览轮播图
		previewImage:function(index){
			var i = _self.pictures; //获取当前页面的轮播图数据
			console.log(i)
			console.log(index)
			console.log(i[index])
			//uniapp预览轮播图
			uni.previewImage({
				current:index, //预览图片的下标
				urls:i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		delFile(index){
			console.log(index)
			const pictures = _self.pictures
			console.log(pictures)
			
			pictures.splice(index,1)
			console.log(pictures)
			
			_self.pictures = pictures
		},
		// 上传
		upload(){
			let picture = {}
			let pictures = this.pictures
			uni.chooseImage({
			 	sourceType: ['camera','album'],//拍照或是打开系统相册选择照片
			 	count: 3,  //最多三张
			    success(res) {
			 		if (Array.isArray(res.tempFilePaths)) {
			            //最多选择三张，如果多选删掉前面选择的
					    if(res.tempFilePaths.length===3){
							pictures.length=0
						}else if(res.tempFilePaths.length==2&&pictures.length==2){
							pictures.splice(0,1)
					    }
			            //把照片的路径放到数组里面
						res.tempFilePaths.forEach(item=>{
							// console.log(item)
							// picture = {url:item,show:false}
							// pictures.push(picture)
							
							uni.showLoading({
								title: '上传中...'
							});
							uni.uploadFile({
								url: 'https://www.miyil.com/upload/upload', //仅为示例，非真实的接口地址
								filePath: item,
								name: 'file',
								formData: {
									
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes.data);
									
									const res = JSON.parse(uploadFileRes.data)
									
									// picture = {res.data}
									
									pictures.push(res.data)
									_self.pictures = pictures
									
									setTimeout(function () {
										uni.hideLoading();
									}, 500);
								}
							});
							// // 保存到本地，（H5页面不可使用）
							// uni.saveImageToPhotosAlbum({
							// 	filePath: item,
							// })
							
						})
						// this.pictures = pictures
			 		}
			    }
			})
		}
	}
}