uni-app是目前常见多端框架之一，目前常见基于uni-app开发各类小程序或app。

那么在网站或小程序等各类应用中，关于图片上传几乎可以说是最为重要的。在uni-app框架中，我们要如何实现图片上传功能呢？

本篇文章就来分享一个基于uni-app框架封装的单图上传公用方法。

一、在utils文件夹中创建utils.js文件

export function uploadImg(callback) {
	let _this = this
	uni.chooseImage({
		count:1,
		sourceType: ['album'],
		success: (chooseImageRes) => {
			const tempFilePaths = chooseImageRes.tempFilePaths;
			uni.uploadFile({
				url: '图片上传url',
				filePath: tempFilePaths[0],
				header:{
					//'shop': '',
					//'guard':''
				},
				name: 'file',
				success: (uploadFileRes) => {
					uploadFileRes = JSON.parse(uploadFileRes.data)
					callback(uploadFileRes.data)
				},
				fail: (res) => {
					console.log(res, '失败');
				}
			});
		}
	});
}

二、在main.js中引入全局方法

import * as util from '@/utils/utils.js'
Vue.prototype.$util = util

三、在页面中调用uploadImg方法，上传单张图片。

<template>
	<view @click="upload">点击上传单图</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods:{
			upload(){
				this.$util.uploadImg((e)=>{
					//打印上传结果
					console.log(e)
				})
			}
		}
	}
</script>

其余相关上传封装方法，可本站搜索。

    uni-app封装方法实现上传微信头像完整代码

    uni-app微信小程序封装方法上传音频文件代码

    uni-app中实现多图批量上传方法封装完整代码