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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值