国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<b id="1pae7"><menuitem id="1pae7"></menuitem></b>

uniapp實(shí)現(xiàn)自定義上傳圖片

2年前作者：東方青云、分類：Toy博客閱讀(36)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了uniapp實(shí)現(xiàn)自定義上傳圖片。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

1、布局樣式

在正式自定義上傳前我們先將靜態(tài)頁(yè)面搭建好。

uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app

樣式代碼：

<template>
	<view>
		<view class="content">
			<view class="images" v-for="(item,index) in 5" :key="index">
				<image class="img" src="../../static/logo.png" mode="aspectFill"></image>
				<view class="remove">x</view>
			</view>
			<view class="files" @click="addFiles">
				<view class="add">+</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.files {
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			color: #6d6d6d;
			font-size: 100rpx;
			font-weight: 100;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
		}

		.images {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.remove {
				width: 50rpx;
				height: 50rpx;
				background-color: #f7f7f7;
				position: absolute;
				top: -5rpx;
				right: -10rpx;
				text-align: center;
				opacity: .5;
				border-radius: 0 0 0 50rpx;
				color: #c5c5c5;
			}
		}
	}
</style>

2、使用uniappAPI（uni.chooseImage）

通過uniapp的uni.chooseImage從本地相冊(cè)選擇圖片或使用相機(jī)拍照。
在data中定義一個(gè)響應(yīng)式數(shù)據(jù)來接收我們選擇的圖片，然后通過v-for渲染到我們的頁(yè)面，達(dá)到縮略圖的效果。

代碼：

<template>
	<view>
		<view class="content">
			<view class="images" v-for="(item,index) in tempFiles" :key="index">
				<image class="img" :src="item.path" mode="aspectFill"></image>
				<view class="remove">x</view>
			</view>
			<view class="files" @click="addFiles">
				<view class="add">+</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tempFiles:[]
			}
		},
		onLoad() {

		},
		methods: {
			addFiles() {
				uni.chooseImage({
					count: 9, // 最大選擇的張數(shù)，默認(rèn)是九張，可以不寫
					success:res=>{
						console.log(res);
						// 接受選擇的圖片數(shù)組
						this.tempFiles= res.tempFiles
					}
				})
			}
		}
	}
</script>

效果：
uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app

3、解決bug和添加功能

3.1 bug1

最初我們定義了只能選擇九張圖片，然而這個(gè)時(shí)候上圖中的+（選擇圖片）還在，我們應(yīng)該在選擇了九張圖片之后將它隱藏。

我們只需要加個(gè)判斷即可

	<view class="files" @click="addFiles" v-if="tempFiles.length < 9">
				<view class="add">+</view>
			</view>

3.2 bug2

在我們選擇了五張，在想多加幾張圖片時(shí)會(huì)發(fā)現(xiàn)之后選擇的圖片會(huì)將之前的圖片覆蓋，所有我們要將圖片進(jìn)行拼接。
uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app

uni.chooseImage({
	count: 9, // 最大選擇的張數(shù)，默認(rèn)是九張，可以不寫
	success: res => {
		console.log(res);
		// 接受選擇的圖片數(shù)組
		this.tempFiles = [...this.tempFiles, ...res.tempFiles]
})

3.3 bug3

如果第一次選擇八張，然后在選擇圖片，會(huì)超過原本我們只想要的九張照片，所有我們要對(duì)它進(jìn)行截取。
uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app

			uni.chooseImage({
					count: 9, // 最大選擇的張數(shù)，默認(rèn)是九張，可以不寫
					success: res => {
						console.log(res);
						// 接受選擇的圖片數(shù)組
						let oldImg = [...this.tempFiles, ...res.tempFiles]
						// console.log(oldImg);
						let newImg = oldImg.slice(0, 9)
						// console.log(newImg);
						// 在賦值前進(jìn)行截取
						this.tempFiles = newImg
					}
				})

3.4 點(diǎn)擊圖片進(jìn)行預(yù)覽

通過uniapp的API(uni.previewImage)我們來完成預(yù)覽圖片這個(gè)功能。

<image @click="previewImg(index)" class="img" :src="item.path" mode="aspectFill"></image>

給每張圖片添加一個(gè)點(diǎn)擊事件，將自身的索引值傳遞過去。

// 預(yù)覽圖片
			previewImg(index) {
				// console.log(this.tempFiles);
				// 過濾
				let imgUrl = this.tempFiles.map(item => item.path)
				// console.log(imgUrl);
				uni.previewImage({
					current: index, //點(diǎn)擊的索引值
					urls: imgUrl,
				})
			}

由于我們的數(shù)據(jù)是這樣的數(shù)組對(duì)象，所以要對(duì)其進(jìn)行過濾，得到一個(gè)只有地址的數(shù)組。

uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app

3.5 刪除圖片

給每個(gè)刪除按鈕添加點(diǎn)擊事件，并將索引值傳遞過去。

<view class="remove" @click="removeImg(index)">x</view>

// 刪除圖片
removeImg(index) {
	this.tempFiles.splice(index, 1)
}

4、云函數(shù)上傳到云存儲(chǔ)

我們先來講上傳按鈕的樣式搭建一下。

<template>
	<view>
		<view class="content">
			<view class="images" v-for="(item,index) in tempFiles" :key="index">
				<image @click="previewImg(index)" class="img" :src="item.path" mode="aspectFill"></image>
				<view class="remove" @click="removeImg(index)">x</view>
			</view>
			<view class="files" @click="addFiles" v-if="tempFiles.length<9">
				<view class="add">+</view>
			</view>
		</view>
		<button class="upload" :disabled="tempFiles.length > 0 ? false : true">發(fā)表</button>
	</view>
</template>

<style lang="scss" scoped>
	.upload {
		position: absolute;
		top: -50rpx;
		right: 20rpx;
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #04c062;
		color: white;
		border-radius: 10rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.content {
		padding: 30rpx;
		margin-top: 70rpx;
		display: flex;
		flex-wrap: wrap;

		.files {
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			color: #6d6d6d;
			font-size: 100rpx;
			font-weight: 100;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
		}

		.images {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.remove {
				width: 50rpx;
				height: 50rpx;
				background-color: #f7f7f7;
				position: absolute;
				top: -5rpx;
				right: -10rpx;
				text-align: center;
				opacity: .5;
				border-radius: 0 0 0 50rpx;
				color: #c5c5c5;
			}
		}
	}
</style>

效果：
uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app
客戶端上傳文件到云函數(shù)、云函數(shù)再上傳文件到云存儲(chǔ)，這樣的過程會(huì)導(dǎo)致文件流量帶寬耗費(fèi)較大。
所以一般上傳文件都是客戶端直傳。

添加點(diǎn)擊事件

<button @click="uploadFn" class="upload" :disabled="tempFiles.length > 0 ? false : true">發(fā)表</button>

默認(rèn)一次只能上傳一個(gè)后面我們進(jìn)行循環(huán)上傳。

			// 上傳到云存儲(chǔ)
			uploadFn() {
				console.log(this.tempFiles);
				uniCloud.uploadFile({
					filePath: this.tempFiles[0].path,
					cloudPathAsRealPath: true, //讓cloudPath作為文件存儲(chǔ)路徑
					cloudPath: "images/" + this.tempFiles[0].name //上傳到images文件夾下
				}).then(res => {
					console.log(res);
				})
			}

上傳成功：
uniapp實(shí)現(xiàn)自定義上傳圖片,uni-app

<button @click="goUpload" class="upload" :disabled="tempFiles.length > 0 ? false : true">發(fā)表</button>

		goUpload() {
				this.tempFiles.forEach(item=>{
					this.uploadFn(item)
				})
			},
			// 上傳到云存儲(chǔ)
			uploadFn(item) {
				uniCloud.uploadFile({
					filePath: item.path,
					cloudPathAsRealPath: true, //讓cloudPath作為文件存儲(chǔ)路徑
					cloudPath: "images/" + item.name //上傳到images文件夾下
				}).then(res => {
					console.log(res);
				})
			}

這樣就完成了上傳多張圖片的功能，不過我們的圖片地址后面還要存儲(chǔ)到數(shù)據(jù)庫(kù)中，所以我們將其改成promise的形式，監(jiān)聽全部上傳完后，然后存儲(chǔ)到數(shù)據(jù)庫(kù)中。

			goUpload() {
				let promissState = this.tempFiles.map(async item => {
					return await this.uploadFn(item)
				})
				// console.log(promissState);
				Promise.all(promissState).then(res => {
					// console.log(res);
					let imgUrl = res.map(item => item.fileID)
					// console.log(imgUrl);
					const objImg = {...imgUrl}
					this.uploadDataBase(objImg)
				}).catch(e => {
					console.log(e);
				})
			},
			// 上傳到云存儲(chǔ)
			uploadFn(item) {
				return uniCloud.uploadFile({
					filePath: item.path,
					// cloudPathAsRealPath: true, //讓cloudPath作為文件存儲(chǔ)路徑
					// cloudPath: "images/" + item.name //上傳到images文件夾下
					cloudPath: item.name,
					//文件夾模式，不允許文件覆蓋
				})
			},
			// 上傳到數(shù)據(jù)庫(kù)
			uploadDataBase(objImg) {
				uniCloud.callFunction({
					name: 'uploadDataBase',
					data: objImg
				}).then(res => {
					console.log(res);
				})
			}

云函數(shù)

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	const data = await db.collection('images').add(event)
	return data
};

最終代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-651353.html

<template>
	<view>
		<view class="content">
			<view class="images" v-for="(item,index) in tempFiles" :key="index">
				<image @click="previewImg(index)" class="img" :src="item.path" mode="aspectFill"></image>
				<view class="remove" @click="removeImg(index)">x</view>
			</view>
			<view class="files" @click="addFiles" v-if="tempFiles.length<9">
				<view class="add">+</view>
			</view>
		</view>
		<button @click="goUpload" class="upload" :disabled="tempFiles.length > 0 ? false : true">發(fā)表</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tempFiles: [],
			}
		},
		onLoad() {

		},
		methods: {
			addFiles() {
				uni.chooseImage({
					count: 9, // 最大選擇的張數(shù)，默認(rèn)是九張，可以不寫
					success: res => {
						// console.log(res);
						// 接受選擇的圖片數(shù)組
						let oldImg = [...this.tempFiles, ...res.tempFiles]
						// console.log(oldImg);
						let newImg = oldImg.slice(0, 9)
						// console.log(newImg);
						this.tempFiles = newImg
					}
				})
			},
			// 預(yù)覽圖片
			previewImg(index) {
				// console.log(this.tempFiles);
				// 過濾
				let imgUrl = this.tempFiles.map(item => item.path)
				// console.log(imgUrl);
				uni.previewImage({
					current: index, //點(diǎn)擊的索引值
					urls: imgUrl,
				})
			},
			// 刪除圖片
			removeImg(index) {
				this.tempFiles.splice(index, 1)
			},
			goUpload() {
				let promissState = this.tempFiles.map(async item => {
					return await this.uploadFn(item)
				})
				// console.log(promissState);
				Promise.all(promissState).then(res => {
					// console.log(res);
					let imgUrl = res.map(item => item.fileID)
					// console.log(imgUrl);
					const objImg = {...imgUrl}
					this.uploadDataBase(objImg)
				}).catch(e => {
					console.log(e);
				})
			},
			// 上傳到云存儲(chǔ)
			uploadFn(item) {
				return uniCloud.uploadFile({
					filePath: item.path,
					// cloudPathAsRealPath: true, //讓cloudPath作為文件存儲(chǔ)路徑
					// cloudPath: "images/" + item.name //上傳到images文件夾下
					cloudPath: item.name,
					//文件夾模式，不允許文件覆蓋
				})
			},
			// 上傳到數(shù)據(jù)庫(kù)
			uploadDataBase(objImg) {
				uniCloud.callFunction({
					name: 'uploadDataBase',
					data: objImg
				}).then(res => {
					console.log(res);
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		position: absolute;
		top: -50rpx;
		right: 20rpx;
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #04c062;
		color: white;
		border-radius: 10rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.content {
		padding: 30rpx;
		margin-top: 70rpx;
		display: flex;
		flex-wrap: wrap;

		.files {
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			color: #6d6d6d;
			font-size: 100rpx;
			font-weight: 100;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
		}

		.images {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.remove {
				width: 50rpx;
				height: 50rpx;
				background-color: #f7f7f7;
				position: absolute;
				top: -5rpx;
				right: -10rpx;
				text-align: center;
				opacity: .5;
				border-radius: 0 0 0 50rpx;
				color: #c5c5c5;
			}
		}
	}
</style>

到了這里，關(guān)于uniapp實(shí)現(xiàn)自定義上傳圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

uni-app 調(diào)用相機(jī)或相冊(cè)圖片并轉(zhuǎn)為base64格式上傳圖片
1、調(diào)用相機(jī)或相冊(cè)上傳圖片 2、圖片文件轉(zhuǎn)base64 （1）下載插件（2）頁(yè)面引入插件 3、image-tools/index.js源碼
2024年02月11日
瀏覽(104)
uni-app App和H5平臺(tái)上傳視頻截取視頻第一幀生成圖片
提示：因?yàn)閡ni-app中renderjs僅支持App和H5平臺(tái)，所以該方案僅支持當(dāng)前這兩個(gè)平臺(tái)。 this.request為本人封裝的接口請(qǐng)求方法，可以替換成個(gè)人的接口請(qǐng)求方法，如有需要可在下方留言因?yàn)閡ni-app App端沒有dom概念，不支持dom操作，并且uni-app的canvas不支持繪制video。renderjs完美解決了
2023年04月09日
瀏覽(30)
uni-app開發(fā)微信小程序，H5 關(guān)于壓縮上傳圖片的問題
文章目錄前言一、為什么要壓縮圖片二、圖片壓縮方式 1. 微信小程序??????? 2. H5 總結(jié) 關(guān)于微信小程序、H5兼容性問題，今天就壓縮以及上傳圖片做一個(gè)可實(shí)現(xiàn)方法的簡(jiǎn)要闡述。在使用uni-app開發(fā)小程序及H5的具體業(yè)務(wù)中，我們會(huì)遇到需要讓用戶上傳本地圖片的場(chǎng)景
2024年02月02日
瀏覽(25)
前端vue uni-app多圖片上傳組件，支持單個(gè)文件，多個(gè)文件上傳步驟條step使用
快速實(shí)現(xiàn)多圖片上傳組件，支持單個(gè)文件，多個(gè)文件上傳步驟條step使用;?閱讀全文下載完整代碼請(qǐng)關(guān)注微信公眾號(hào)：前端組件開發(fā) 效果圖如下: 使用方法 ? 使用方法 HTML代碼部分 ? html JS代碼（引入組件填充數(shù)據(jù)） ? javascript
2024年02月08日
瀏覽(31)
uni-app 實(shí)現(xiàn)文件上傳
在使用若依的框架時(shí)，發(fā)現(xiàn)若依移動(dòng)端框架中已經(jīng)封裝好了一個(gè)upload.js用于文件上傳，自己在這個(gè)版本的基礎(chǔ)上稍作改動(dòng)，成功實(shí)現(xiàn)文件上傳功能若依公共的 upload.js? 自己再封裝一個(gè) js 文件，此處命名 upload.js 但不和若依的文件放在同一個(gè)目錄下在文件中調(diào)用需要先引入
2024年02月11日
瀏覽(29)
uni-app實(shí)現(xiàn)canvas繪制圖片、海報(bào)等
前段時(shí)間有個(gè)項(xiàng)目，需要繪制海報(bào)，我一聽這不是可以用canvas來實(shí)現(xiàn)嗎，所以我在五一假期就記錄下實(shí)現(xiàn)方式我把canvas繪制圖片封裝成一個(gè)組件，直接引入使用就好了。這里雖然是uni-app寫的，但實(shí)現(xiàn)方式其實(shí)都是一樣的，之后其他原生小程序用到也是大差不大的，真的很簡(jiǎn)
2024年02月09日
瀏覽(165)
uni-app小程序?qū)崿F(xiàn)音頻播放，uniapp播放錄音，uniapp簡(jiǎn)單實(shí)現(xiàn)播放錄音
復(fù)制到.vue文件即可預(yù)覽效果問題：開發(fā)者工具中.onTimeUpdate方法可能會(huì)失效！官方參考：https://uniapp.dcloud.net.cn/api/media/audio-context.html# 其他博客參考：https://blog.csdn.net/weixin_45328705/article/details/114091301 錄音實(shí)現(xiàn)參考：https://blog.csdn.net/weixin_43992507/article/details/129857780
2024年02月12日
瀏覽(228)
uni-app+uView實(shí)現(xiàn)點(diǎn)擊查看大圖片的效果
參數(shù)說明
2024年02月10日
瀏覽(67)
uni-app - 頭像圖片裁剪組件（支持多種裁剪，手勢(shì)控制旋轉(zhuǎn)或縮放、內(nèi)外部控制圖片移動(dòng)、提供上傳后端接口方案、頭像圖片美化）全端完美兼容 H5 App 小程序，最好用的圖片上傳后裁剪插件教程源代碼
網(wǎng)上的教程代碼非常亂且都有 BUG 存在，非常難移植到自己的項(xiàng)目中，而且很難。實(shí)現(xiàn)了完美兼容 H5 App 小程序，選取手機(jī)本地相冊(cè)或拍照，圖片上傳裁切內(nèi)置多種方案，樣式隨便改，本文代碼干凈整潔注釋詳細(xì)，您一鍵復(fù)制源碼后參照示例幾分鐘就能完事，如下圖真機(jī)測(cè)
2024年02月17日
瀏覽(85)
uni-app實(shí)現(xiàn)上傳文件至云存儲(chǔ)的三種方式
目錄前言 1.在uniCloud WEB控制臺(tái)中可以直接上傳文件 2.客戶端api上傳或者組件組件上傳客戶端手動(dòng)api上傳 3. 云函數(shù)上傳文件到云存儲(chǔ) 總結(jié) 開發(fā)者使用 uniCloud 的云存儲(chǔ)，無需再像傳統(tǒng)模式那樣單獨(dú)去購(gòu)買存儲(chǔ)空間、CDN映射、流量采購(gòu)等，本篇文章主要講解如何使用uni-app實(shí)現(xiàn)
2024年02月08日
瀏覽(34)