uniapp中封装图片上传功能

<template>
	<u-upload
		:fileList="fileList1"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		multiple
		:maxCount="9"
	></u-upload>
</template>
 
<script>
	export default {
		data() {
			return {
				fileList1: [],
			}
		},
		methods:{
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: JSON.parse(result).data
					}))
					fileListLen++
				}
                uploadFilePromise(url) {
	                return new Promise((resolve, reject) => {
		                let a = uni.uploadFile({
		                	url: 'https://test.pc.yscwr.com/api/image/upload', // 测试地址
			                filePath: url,
			                name: 'file',
			                success: (res) => {
			                	// setTimeout(() => {
			                		resolve(res.data)
			                	// }, 1000)
		                	}
		                });
	                })
                };
			},
		}
	}
</script>

注：

this[`fileList${event.name}`]  其实就是  this.fileList1 
这样写的话 这个参数就是动态的,比如一个文件中有多个上传图片功能,你可以写多个html,但只需要写一个js

新建一个文件image.js 进行封装

//直接导出这个方法
export function uploadImg(event,fileList) {
	return new Promise((resolve,reject)=>{
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = fileList.length
		lists.map((item) => {
			fileList.push({
				...item
			})
		})
       // 这块把uview的改了一下 不用单独封装上传功能
		for (let i = 0; i < lists.length; i++) {
			uni.uploadFile({
				url: '192.111.111.111', // 测试地址
				filePath: lists[i].url, // 文件路径
				name: 'file',
				success: (res) => {
					let resolveData = {
						data: res.data,
						fileListLen: fileListLen
					}
                    // 成功之后返回resolveData
				    resolve(resolveData);
					fileListLen++
				}
			});
		}
	})
}

使用

<template>
	<u-upload
		:fileList="fileList"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		multiple
		:maxCount="9"
	></u-upload>
</template>
 
<script>
    // 导入这个方法
	import {uploadImg} from '../../utils/image.js'
	export default {
		data() {
			return {
				fileList: [],
			}
		},
		methods:{
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			async afterRead(event){
                //使用这个封装
				const result = await uploadImg(event,this.fileList)
				let item = this.fileList[result.fileListLen]
				this.fileList.splice(result.fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '成功',
					url: JSON.parse(result.data).data
				}))
			}
		}
	}
</script>