uni-app上传图片方法封装

function chooseImg(count, success) {
	console.log(count)
	uni.chooseImage({
		count: count,
		success: res => {
			// console.log(res)
			// console.log(res.tempFilePaths)
			uploadFiles(res.tempFilePaths,success)
		}
	})
}

async function uploadFiles(paths,success) {
	uni.showLoading({
		title: '正在上传'
	})
	for (let path of paths) {
		try {
			const uploadData = await uploadFile(path)
			console.log(uploadData)
			success(uploadData)
		} catch(err) {
			console.log(err)
			uni.showToast({
				title:err||'上传失败',
				icon:'error',
				mask:true
			})
			break;
		}
	}
	uni.hideLoading()
}

function uploadFile(path) {
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: '这里是你们后台的上传接口地址',
			filePath: path,
			name: 'file',
			header: {  //(根据自身接口要求选择)
				accessToken: uni.getStorageSync('token')
			},
			formData: {  //上传文件的额外参数(根据自身接口要求选择)
				type: 1
			},
			success: res => {
				console.log('上传文件', res)
				const imgRes=JSON.parse(res.data)
				if(imgRes.code==200){
					resolve(imgRes.data)
				}else{
					reject('上传失败');
				}
			},
			fail: () => {
				reject('网络错误');
			}
		});
	})
}

module.exports = {
	uploadImg: chooseImg,
}

可以全局注册也可以单独引用,我这里是全局注册

import upLoad from "@/utils/upload";
Vue.prototype.$upload = upLoad;

然后是调用

// 这是单张图片上传
this.$upload.uploadImg(1,res=>{
    //res就是图片地址
	this.img = res
})

// 这是多张图片上传
this.$upload.uploadImg(3,res=>{
    //res就是图片地址
	this.imgArr.push(res)
})
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐