uniapp 图片文件选择、上传、预览、删除

uniapp 图片文件选择、上传、预览、删除

<template>
	<view>
		<view>
			
		</view>
		<view v-for="(item,index) in imgList">
			<view style="margin: 20rpx;position: relative;">
				<image :src="item" style="height:450rpx;width: 100%;" @click="previewImage(index)"></image>
				<!-- 移除图片的按钮  -->
				<view class="q-image-remover" @click="deleteImg(index)">
					<!-- <image class="deldete" src=""  mode="widthFix"></image> -->
					<uni-icons type="trash" color="#fff" size="30"></uni-icons>
				</view>
			</view>
		</view >
		<button @click="chooseImg">测试</button>
		{{imgList}}
		<button @click="uploadImg">测试2</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:[]
			}
		},
		methods: {
			chooseImg(){
				let _this = this;
				uni.chooseImage({
					count: 2, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						_this.imgList = res.tempFilePaths;
						// _this.imgList = _this.imgList.concat(res.tempFilePaths);
					}
				});
			},
			previewImage(index){
				let _this = this;
				uni.previewImage({
					current:index,
					urls: _this.imgList,
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			deleteImg(index){
				var _this = this
				uni.showModal({
				    title: "删除",
				    content: "是否删除该选中的图片！",
				    confirmText: "删除",
				    success(res) {
				        if (res.confirm) { //删除
				            _this.imgList.splice(index, 1)
				        }
				    }
				})
			},
			
			//单图片
			uploadImg(){
				
				// let tmpList = [];
				
				// this.imgList.forEach((item,index)=>{
				// 	// console.log(item);
				// 	console.log(index);
				// 	let tmp = {};
				// 	tmp.name = "number"+index;
				// 	tmp.uri = item;
				// 	tmpList.push(tmp)
				// })
				
				// console.log(tmpList);

				uni.uploadFile({
					url: 'https://localhost:44347/Uniapp/UploadImg', //开发者服务器 url
					header:{
						// HTTP 请求 Header, header 中不能设置 Referer
						//"Content-Type": "multipart/form-data",
					},
					//files:tmpList,//需要上传的文件列表
					filePath: this.imgList[0], // 要上传文件资源的路径
					name: 'fileblock', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
					},
					success(res) {
						console.log('上传成功', res);
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},
			//多图片
			uploadImgMulit(){
				
				let tmpList = [];
				
				this.imgList.forEach((item,index)=>{
					// console.log(item);
					console.log(index);
					let tmp = {};
					tmp.name = "number"+index;
					tmp.uri = item;
					tmpList.push(tmp)
				})
				
				console.log(tmpList);
			
				uni.uploadFile({
					url: 'https://localhost:44347/Uniapp/UploadImg', //开发者服务器 url
					// header:{
					// 	// HTTP 请求 Header, header 中不能设置 Referer
					// 	//"Content-Type": "multipart/form-data",
					// },
					files:tmpList,//需要上传的文件列表
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
					},
					success(res) {
						console.log('上传成功', res);
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			}
		}
	}
</script>

<style>
.q-image-remover{
	width: 0;
	height: 0;
/* 	border-top: 66rpx solid red;
	border-left: 66rpx solid transparent; */
	width: 66rpx;
	height: 66rpx;
	border-radius: 0 0 0 20rpx;
	background-color: red;
/* 	border-right: 66rpx solid lightpink;
	border-bottom: 66rpx solid lightsalmon; */
	position: absolute;
	top: 0;
	right: 0rpx;
}
</style>