uniapp在提交的时候实现多图上传功能

一、效果展示

可以实现多图上传，删除功能

二、上传接口封装

1、在untils目录下新增一个crmRequest.js文件，编写如下代码
const BASE_URL = "https://examle.com"
//图片上传
export const crmUploadImage = async (image) => {
 // 检查传入的 image 是否是文件类型
 if (!image) {
  throw new Error('No file provided');
 }
 try {
  return new Promise((resolve, reject) => {
   uni.uploadFile({
    url: BASE_URL+'/repair/upload/uploadImg', // 替换为实际的接口地址
    filePath: image, // 当前文件路径
    method: 'POST',
    name: 'file', // 文件字段名称
		formData:{ type:'repair'},
    success: (res) => {
     resolve(res.data); // 假设返回的数据是文件的路径
    },
    fail: (err) => {
     reject(err); // 上传失败
    }
   });
  });
 } catch (error) {
  console.error('上传失败', error);
  throw error;
 }
};

2、在main.js引入上传方法

import App from './App'
import { crmUploadImage } from './utils/crmRequest.js'
Vue.prototype.$crmUploadImage = crmUploadImage

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
 ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
 const app = createSSRApp(App)
 return {
  app
 }
}
// #endif

三、图片上传方法代码

<template>
	<view class="content">
		<form @submit="formSubmit" @reset="formReset">
			<view class="fault">
				<view class="fault-item upload-item">
					<view class="title">拍照</view>
					<view class="upload-imgcont template-panle">
					  <repeat v-for="(image, index) in images" :key="image.id">
					    <view class="upload-img-cont">
					      <image class="upload-img" :src="image"></image>
					      <icon @tap="removeImage(index)" class="clear-img" color="#F53430" size="20" type="clear"></icon>
					    </view>
					  </repeat>
					  <view class="upload-img-cont" v-if="images.length < 12">
					    <image @tap="uploadImg" class="upload-img" src="/uploadicon.png"></image>
					  </view>
					</view>
				</view>
			</view>
 
			<view class="uni-btn-subrepair">
				<button form-type="submit" class="subrepair" :disabled="isSubmitting" >提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSubmitting: false, // 标志位，防止多次提交
				images: [],
			}
		},
		async onLoad(options) {
			this.images = []
			uni.hideHomeButton();  
		},
		async onPullDownRefresh() {
		 uni.stopPullDownRefresh()
		},
		onShow() {
			uni.hideHomeButton();  
		},
		methods: {
			// 图片上传
			async uploadImg() {
				let image = await uni.chooseImage({count: 12})
				this.images = this.images.concat(image.tempFilePaths)
			},
			async removeImage(idx) {
				this.images.splice(idx, 1)
			},
			async formSubmit(e){	
				let images = this.images
				let _images = []
				if(images.length !=0){
					for (let i = 0; i < images.length; i++) {
						let imageResponse = await this.$crmUploadImage(images[i]);
						var imageAll = JSON.parse(imageResponse)	
							console.log(imageAll.data.src)
						_images[i] = imageAll.data.src
					}
					_images = _images.join()
				}
 
				var param = {
					imgs: _images.length==0 ? null : _images,
				}
				// 如果正在提交，则直接返回，防止多次提交
				 if (this.isSubmitting) {
					return;
				 }
 
				 // 设置标志位为 true，表示正在提交
				 this.isSubmitting = true;
				 try {
					 // 模拟提交请求
					const subResponse = await this.$crmRequest({
						url: '/repair/repair/add',
						method:'post',
						data: param
					})
					if(subResponse.data.code==200){
						// 提交成功后，重置标志位
						this.isSubmitting = false;
						this.images = [];
 
					}else{
						// 如果请求失败，重置标志位
					  this.isSubmitting = false;
					}
				 }catch (error) {
					// 处理错误情况
					console.log('提交失败', error);
					// 如果请求失败，重置标志位
					this.isSubmitting = false;
				 }
				console.log(param) ;
 
			}
		},
	}
</script>

<style>
page{ background-color: #f8f8f8;}
.content{ width: 100%;}
.fault{ width: 100%; float: left; margin-top: 20rpx;}
.fault-item{width: 100%;float: left; font-size: 30rpx; color: #1d1d1d; margin-top: 5rpx; background-color: #fff; padding-top: 15rpx; padding-bottom: 15rpx;}
.fault-item .title{ width: 100rpx;float: left; font-size: 30rpx; color: #1d1d1d; margin-left: 25rpx; height: 100rpx; line-height: 100rpx;}
.fault-item .content_title_one{width: 725rpx; float: left;}
.fault-item .content_content{ width: 100%;}
.fault-item .content_content textarea{ width: 700rpx; font-size: 30rpx; color: #1d1d1d; height: 200rpx; float: left; margin-left: 25rpx;}
.upload-imgcont{display:flex;flex-flow:row wrap;padding:15rpx 0 0 0}
.upload-imgcont .upload-img-cont{position:relative;flex:1;width:125rpx;height:125rpx;padding:0 7rpx;margin-bottom:10rpx; margin-right: 10rpx; box-sizing:border-box}
.upload-imgcont .upload-img-cont .upload-img{display:block;height:125rpx;width:125rpx}
.upload-imgcont .upload-img-cont .clear-img{position:absolute;top:-12rpx;right:-3rpx}
.upload-item{ height: auto;}
.upload-item .title{ height: 125rpx; line-height: 140rpx;}
.uni-btn-subrepair{ width: 700rpx; height: 100rpx; float: left; margin-left: 25rpx; margin-top: 80rpx;margin-bottom: 200rpx;}
.subrepair{ width: 100%; height: 100rpx; line-height: 100rpx; float: left; background-color: #ff421d; border-radius: 45rpx; color: #fff;}
.subrepair::after{ border:0rpx}
</style>