快捷導(dǎo)航

uniapp小程序上傳文件webapi后端項(xiàng)目asp.net完整代碼

更新時(shí)間：2024年07月22日 09:58:35 作者：woflyoycm

在uniapp中,實(shí)現(xiàn)文件上傳功能也變得非常簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序上傳文件webapi后端項(xiàng)目asp.net的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求

小程序需要上傳用戶相冊(cè)圖片或拍攝的照片到后端服務(wù)器

uniapp官方處理小程序文件方法

選擇文件方法：uni.chooseMedia

uni-app官網(wǎng)

上傳文件方法：uni.uploadFile

uni.uploadFile(OBJECT)

前端代碼

前端項(xiàng)目為vue3類型的uniapp小程序項(xiàng)目

這里封裝一個(gè)簡(jiǎn)單的插件來(lái)處理圖片的選擇和上傳

<template>
	<view class="flex align-start flex-wrap padding-bottom">
		<view class="flex flex-direction align-center justify-between margin-left-lg margin-top"
			v-for="(item,index) in innerFileList" :key="index">
			<image class="cu-avatar xl radius" mode="scaleToFill" :src="item.fileUrl" @tap="previewImg(item)"></image>
			<text class='text-second' @tap="handleDelete(item)">刪除圖片</text>
		</view>
		<view class="cu-avatar xl radius margin-left-lg margin-top" @tap="handleChoose">
			<text class="cuIcon-pic"></text>
		</view>
	</view>
</template>

<script setup>
import {
		ref,
		computed,
		reactive,
		onMounted,
		watch
	} from 'vue'
import {
		useStore
	} from 'vuex'
	import {
		toastError,
		toastMessage
	} from '@/util/common.js'

const props = defineProps({
		fileList: Array,
		fileUse: Number,
		limit: {
			type: Number,
			default: 5
		}
	})
	const store = useStore()
	const emits = defineEmits(['updateFile'])
	const token = computed(() => store.state.token)
	const innerFileList = ref([])
	onMounted(() => {
		getFileList()
	})
	watch(() => props.fileList, (n, o) => {
		if (!n || !n.length) {
			innerFileList.value = []
		} else if (!innerFileList.value.length) {
			getFileList()
		} else {
			if (n.length !== innerFileList.value.length) {
				getFileList()
			}
		}
	})
	const getFileList = () => {
		innerFileList.value = []
		if (props.fileList && props.fileList.length) {
			for (let item of props.fileList) {
				item.fileUrl = getFileUrl(item.fileToken)
			}
			innerFileList.value = props.fileList
		}
	}
	const {
		getFileUrl
	} = useGetFileUrl()
	// 刪除文件
	const handleDelete = item => {
		uni.showModal({
			title: '確定刪除嗎？',
			content: '確定刪除該圖片嗎',
			success: res => {
				if (res.confirm) {
					let index = innerFileList.value.findIndex(x => x.fileUrl === item.fileUrl)
					innerFileList.value.splice(index, 1)
				}
			}
		})
	}
	// 選擇文件
	const handleChoose = () => {
		if (innerFileList.value.length >= props.limit) {
			toastError('不能超過(guò)' + props.limit + '張')
			return
		}
		// #ifdef MP-WEIXIN
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			fail: error => {
				console.log('圖片選擇失敗', error)
			},
			success: res => {
				let file = res.tempFiles[0]
				innerFileList.value.push({
					id: 0,
					fileUrl: file.tempFilePath
				})
				if (!file) return
				handleUpload(file.tempFilePath, '手機(jī)圖片')
			}
		})
		// #endif
		// #ifdef APP 
		uni.chooseImage({
			count: 1,
			fail: error => {
				console.log('圖片選擇失敗', error)
			},
			success: res => {
				let filePath = res.tempFilePaths[0]
				innerFileList.value.push({
					id: 0,
					fileUrl: filePath
				})
				if (!filePath) return
				handleUpload(filePath, '手機(jī)圖片')
			}
		})
		// #endif
	}
	const handleUpload = (filePath, name) => {
		let accessToken = 'Bearer ' + token.value
		let uploadUrl = '我的服務(wù)器url'
		uni.uploadFile({
			url: uploadUrl,
			filePath: filePath,
			name: name,
			header: {
				Authorization: accessToken,
			},
			fail: error => {
				console.log('圖片上傳失敗', error)
				toastError('圖片上傳失敗')
			},
			success: uploadRes => {
				console.log('圖片上傳成功', uploadRes)
				if (uploadRes.statusCode === 200) {
					let data = JSON.parse(uploadRes.data)
					if (data.data) {
						let item = innerFileList.value[innerFileList.value.length - 1]
						item.fileId = data.data.picId
						item.fileToken = data.data.picToken
						item.fileUse = props.fileUse
						emits('updateFile', innerFileList.value)
					}
				}
			}
		})
	}
	// 預(yù)覽
	const previewImg = item => {
		let urls = [item.fileUrl]
		uni.previewImage({
			urls: urls
		})
	}


</script>

<style>

</style>

后端代碼

后端項(xiàng)目為asp.net6的webapi項(xiàng)目

注意入?yún)镮FormCollection formCollection 和web項(xiàng)目的IFormFile file入?yún)⒂兴鶇^(qū)別

[HttpPost("upload_app_sales_order_cert")]
        [Authorize]
        public async Task<CommonResponse<UploadFileRes>> UploadSalesOrderCertApp(IFormCollection formCollection)
        {
            var user = GetUser();
            FormFileCollection formFiles = (FormFileCollection)formCollection.Files;
            var file = formFiles[0];
//這里換成自己的業(yè)務(wù)邏輯
            var res = await _uploadDataService.UploadFileAsync(file, user.UserId, user.DealerId, FileUse.銷售單憑證);
            return new CommonResponse<UploadFileRes>(res);
        }