uni-app(四)上传图片以及图片预览

如何实现图片上传以及图片预览？

图片上传：

绑定click事件，定义updateImg方法

<template>
    <view>
        <view style="border: 2rpx solid transparent;border-radius: 50%;	overflow: hidden;
			margin-left: 20rpx;" @click="updateImg">
		    <image style="display: block; width: 150rpx; height: 150rpx;" :src="avatarUrl" mode=""></image>
		</view>
    </view>
</template>

<script>
import {
    save
} from "@/api/xxxx"
export default {
    data() {
        return {
            avatarUrl: ""
        }
    },
    methods: {
        updateImg() {
    		uni.chooseImage({
				success: chooseImageRes => {
					const filePath = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: baseUrl + 'upload', // 后端接口URL，baseUrl 是访问接口的地址
						filePath: filePath,
						name: 'file',
						success: (res) => {
							let dataList = JSON.parse(res.data)
                            //保存的接口
							save({
									avatarUrl: dataList.fileName,
								}).then(res => {
									if (res.data.code == 200) {
										this.avatarUrl = imgBaseUrl + res.data.data.avatar  //imgBaseUrl 是拼接的一个访问地址
						},
						fail: (err) => {
							console.error(err);
						}
					});
				},
				fail: err => {
					console.error(err);
				}
			})
		},
    }
}
</script>

图片预览：

绑定tap事件，定义previewImage方法

绑定tap事件，定义dele方法

<template>
    <view style="padding: 20rpx;">
		<view v-for="(item, index) in fileLists" :key="index"
			style="width: 210rpx;float: left;margin-bottom: 20rpx;margin-right: 30rpx;">
			<image style="display: block; width: 220rpx; height: 220rpx;" :src="item.url" mode="" @tap="previewImage(index)"></image>
		</view>
	</view>
</template>

<script>
import {
    findImg,
    deleteImg
} from "@/api/xxxx"
export default {
    data() {
        return {
            fileLists: []
        }
    },
    onLoad() {
		this.getUpload(getUserInfo().id) //getUserInfo运用本地存储缓存的用户信息
	},
    methods: {
        previewImage(index) {
			let urls = []
			urls = this.fileLists.map(item => item.url)
			uni.previewImage({
				urls: urls,//图片地址
				current: urls[index]//当前显示图片地址
			})
		},
		getUpload(stuId) {
			findImg(stuId).then(res => { //图片查询接口
				if (res.data.code == 200) {
					this.fileLists = res.data.data.map(item => {
						return {
							id: item.id,
							url: imgBaseUrl + item.imgUrl
						}
					})
				}
			})
		},
        //长按删除
		dele(item,index) {
			wx.showModal({
				title: '提示',
				content: '确定要删除此图片吗？',
				success: (res)=> {
					if (res.confirm) {
						this.fileLists.splice(index, 1); //根据数组下标删除长按图片	
						deleteImg(item.id).then(res=>{  //后端接口
								
						})
					} else if (res.cancel) {
							return false;
					}
				}
			})
		}
    }
}
</script>