uniapp使用u-upload組件來實現(xiàn)圖片上傳功能

更新時間：2023年01月03日 09:20:59 作者：YZRHANYU

最近在用uniapp開發(fā)微信小程序,下面這篇文章主要給大家介紹了關于uniapp使用u-upload組件來實現(xiàn)圖片上傳功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在使用 uniapp 開發(fā)的微信小程序中使用了圖片上傳功能,使用了 uniapp 的圖片上傳組件

注意：我這里后端接口接收類型為form-data，參數(shù)名為files

一、官方示例用法

uview 1.0 u-upload 官方文檔

<template>
	<view>
		<u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				filesArr: []
			}
		},
		methods: {
			submit() {
				let files = [];
				// 通過filter，篩選出上傳進度為100的文件(因為某些上傳失敗的文件，進度值不為100，這個是可選的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要進行太多的處理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			}
		}
	}
</script>

分析

首先可以看到 <u-upload ref="uUpload" :action="action" :auto-upload="true" > 這里的 :auto-upload="true" ,這里是設置文件選中后自動上傳,且上傳路徑為 data 當中定義的 action ,但是這里使用自動上傳的時候,只能設置上傳的 url 地址,如果業(yè)務當中有其他需求,比如請求頭中需要攜帶 token … 將無法滿足

因此可以選擇將自動上傳關掉 :auto-upload="false"

綁定選擇完成后的回調函數(shù),并在回調函數(shù)當中使用手動上傳 @on-choose-complete="onChooseComplete"

二、關閉自動上傳,使用手動上傳的方式,代碼 html 代碼

<template>
	<u-form :model="deviceInfo" ref="uForm">
		<view class="top">
			<u-form-item prop="imgUrl" label-width="10" :border-bottom='false'>
				<u-upload @on-choose-complete="onChooseComplete" ref="uUpload" :custom-btn="true"
					:show-upload-list="true" :auto-upload="false" :file-list="fileList" :show-progress="true"
					:deletable="true" max-count="1" class="test2">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="../static/img/addDevice.jpg" mode="aspectFill"></image>
					</view>
				</u-upload>
			</u-form-item>
		</view>
	</u-form>
</template>

js 代碼

<script>
	// 這里引入的 Config 中配置了整個項目的接口地址
	import Config from '@/core/config'
	// 這里引入 store 是為了獲取 token
	import store from '@/store/index.js';
	// 后端api地址
	const uploadUrl = Config.get('apiUrl') + 'admin-api/infra/file/upload';
	export default {
		data() {
			return {
				// 預置上傳列表
				fileList: [],
				deviceInfo: {
					photoUrl: '',
				}
			}
		},
		methods: {
			onChooseComplete(lists, name) {
				const app = this;
				uni.uploadFile({
					// 這里是你上傳圖片的地址
					// url: 'https://xxx.xx.xx.xx/admin-api/infra/file/upload',
					url: uploadUrl,
					filePath: lists[0].url,
					name: 'file',
					header: {
						"Authorization": `Bearer ${store.getters.token}`
					},
						//	這個res是后端返回給你上傳成功的數(shù)據(jù)里邊一般會有上傳之后圖片的在線路徑
					success: (res) => {
						app.deviceInfo.photoUrl = JSON.parse(res.data).data;
						console.log(JSON.parse(res.data).data)
					},
				})
			},
		}
	}
</script>

css 代碼

<style lang="scss" scoped>
	.top {
		width: 224rpx;
		height: 224rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
		margin-top: 50rpx;

		image {
			width: 224rpx;
			height: 224rpx;
			border-radius: 50%;
		}

		.tips {
			font-size: 28rpx;
			color: $u-type-primary;
		}
	}
</style>

當前實現(xiàn)的效果

總結分析

當前項目中提供的上傳圖片需要攜帶 token
所以采用了 uni.uploadFile 來上傳文件,這里要求參數(shù) url 在app 端寫全(攜帶 http / https )
uni.uploadFile 是無法被統(tǒng)一的請求攔截器攔截到的,如果需要攜帶請求頭,需要自己在 uni.uploadFile 中進行配置,

例如：以上就是今天要講的內容，本文僅僅簡單介紹了pandas的使用，而pandas提供了大量能使我們快速便捷地處理數(shù)據(jù)的函數(shù)和方法。

到此這篇關于uniapp使用u-upload組件來實現(xiàn)圖片上傳功能的文章就介紹到這了,更多相關uniapp u-upload組件圖片上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: