uniapp小程序上传文件webapi后端项目asp.net完整代码

 更新时间:2024年07月22日 09:58:35   作者:woflyoycm  
在uniapp中,实现文件上传功能也变得非常简单,下面这篇文章主要给大家介绍了关于uniapp小程序上传文件webapi后端项目asp.net的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

需求

小程序需要上传用户相册图片或拍摄的照片到后端服务器

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

选择文件方法:uni.chooseMedia

uni-app官网

上传文件方法:uni.uploadFile

uni.uploadFile(OBJECT) 

前端代码

前端项目为vue3类型的uniapp小程序项目

这里封装一个简单的插件来处理图片的选择和上传

<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('不能超过' + 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, '手机图片')
			}
		})
		// #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, '手机图片')
			}
		})
		// #endif
	}
	const handleUpload = (filePath, name) => {
		let accessToken = 'Bearer ' + token.value
		let uploadUrl = '我的服务器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)
					}
				}
			}
		})
	}
	// 预览
	const previewImg = item => {
		let urls = [item.fileUrl]
		uni.previewImage({
			urls: urls
		})
	}


</script>

<style>

</style>

后端代码

后端项目为asp.net6的webapi项目

注意入参为IFormCollection formCollection  和web项目的IFormFile file入参有所区别

[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];
//这里换成自己的业务逻辑
            var res = await _uploadDataService.UploadFileAsync(file, user.UserId, user.DealerId, FileUse.销售单凭证);
            return new CommonResponse<UploadFileRes>(res);
        }

总结 

到此这篇关于uniapp小程序上传文件webapi后端项目asp.net的文章就介绍到这了,更多相关uniapp小程序上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-cli开发环境实现跨域请求的方法

    vue-cli开发环境实现跨域请求的方法

    本篇文章主要介绍了vue-cli开发环境实现跨域请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue3 销毁组件方法及问题解决方案

    vue3 销毁组件方法及问题解决方案

    这篇文章主要介绍了vue3 销毁组件方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue3全局配置axios的两种方式总结

    Vue3全局配置axios的两种方式总结

    在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Avue实现动态查询与数据展示的示例代码

    Avue实现动态查询与数据展示的示例代码

    Avue是一个基于Vue.js的前端框架,它是由阿里云开发的一款企业级UI组件库,旨在提供一套全面、易用且高性能的界面解决方案本文介绍了Avue实现动态查询与数据展示的示例,需要的朋友可以参考下
    2024-08-08
  • vue项目使用CDN引入的配置与易出错点

    vue项目使用CDN引入的配置与易出错点

    在日常开发过程中,为了减少最后打包出来的体积,我们会用到cdn引入一些比较大的库来解决,下面这篇文章主要给大家介绍了关于vue项目使用CDN引入的配置与易出错点的相关资料,需要的朋友可以参考下
    2022-05-05
  • rem实现响应式布局的思路详解

    rem实现响应式布局的思路详解

    这篇文章主要为大家介绍了rem实现响应式布局的思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Javascript结合Vue实现对任意迷宫图片的自动寻路

    Javascript结合Vue实现对任意迷宫图片的自动寻路

    本文将结合实例代码介绍Javascript结合Vue实现对任意迷宫图片的自动寻路,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue 文件切片上传的项目实现

    vue 文件切片上传的项目实现

    本文主要介绍了vue 文件切片上传的项目实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue中的代码如何进行断点调试

    vue中的代码如何进行断点调试

    这篇文章主要介绍了vue中的代码如何进行断点调试问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue2实现组件延迟加载的示例代码

    Vue2实现组件延迟加载的示例代码

    当一个页面需要加载较多个组件时,并且组件自身又比较复杂,如果一次性加载,可能等待时间较长,体验不好,这个时候就需要延迟加载了,本文为大家介绍了Vue2实现组件延迟加载的示例代码,需要的可以参考下
    2024-01-01

最新评论