需求

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

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

选择文件方法：uni.chooseMedia

uni-app官网uni-app,uniCloud,serverless,uni.chooseVideo(OBJECT),chooseVideo HarmonyOS 兼容性,uni.chooseMedia(OBJECT),uni.saveVideoToPhotosAlbum(OBJECT),saveVideoToPh

https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia

上传文件方法：uni.uploadFile

uni.uploadFile(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.uploadFile(OBJECT),uploadFile HarmonyOS 兼容性,参数 HarmonyOS 兼容性,返回值 HarmonyOS 兼容性,UploadTask 的方法,abort(),onProgressUpdate

https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile

前端代码

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

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

<code><template>

<view class="flex align-start flex-wrap padding-bottom">code>

<view class="flex flex-direction align-center justify-between margin-left-lg margin-top"code>

v-for="(item,index) in innerFileList" :key="index">code>

<image class="cu-avatar xl radius" mode="scaleToFill" :src="item.fileUrl" @tap="previewImg(item)"></image>code>

<text class='text-second' @tap="handleDelete(item)">删除图片</text>code>

</view>

<view class="cu-avatar xl radius margin-left-lg margin-top" @tap="handleChoose">code>

<text class="cuIcon-pic"></text>code>

</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>

后端代码