Vue2移动端（H5项目）项目基于vant封装图片上传组件（支持批量上传、单个上传、回显、删除、预览、最大上传数等功能）---解决批量上传问题

一、最终效果

二、参数配置

1、代码示例：

<t-upload@fileList="fileList":showFileList="showFileList"@showFile="showFile":showFileUrl="showFileUrl"/>

2、配置参数（TUpload Attributes）继承van-uploader的属性

参数	说明	类型	默认值
limitSize	限制上传文件大小	Number	10MB
fileType	限制上传的文件类型	String	.jpg,.jpeg,.png
totalLimit	最多上传个数限制	Number	5
showFileList	回显文件的list（内含：url–>对应完整路径）	Array	-
showFileUrl	上传组件回显图片–相对路径数据（后台需要）	Array	-
savePath	服务器上传地址	String	自己的上传地址

3、events 事件继承van-uploader的事件

事件名	说明	返回值
fileList	上传成功或删除成功触发	返回最终上传数据
showFile	回显list删除后触发	返回回显上传没有删除的数据

三、具体页面使用

<template><div class="initial_Judgment"><div class="img_box"><div class="img_title">终判图</div><t-upload:showFileUrl="showFileUrl":showFileList="showFileList"@fileList="fileList"@showFile="showFile"/></div></div>
</template>
<script>
export default {name: 'initialJudgment',data() {return {formData: {images: [], //上传图片},showFileList: [], // 上传组件--回显内含url且是完整地址showFileUrl: [], // 上传组件回显图片--相对路径数据}},created() {this.getFinalInfo()},methods: {// 获取详情信息async getFinalInfo() {const res = await this.$api.getFinalInfo(this.$route.query.id)console.log('详情数据', res)if (res.success) {if (res.data.finalImages.length > 0) {this.showFileList = res.data.finalImages || []this.showFileUrl = res.data.finalImages.map(item => item.relativeUrl)}}},// 回显数据删除触发showFile(list) {this.showFileUrl = list},// 上传成功或删除触发fileList(list) {this.formData.images = list},// 点击确认async handlerConfirm() {const { warehouseSpaceId, receveMethod, images } = this.formData;const requiredFields = [{ field: warehouseSpaceId, message: '请先选择卸货料垛' },{ field: receveMethod, message: '请先选择收货方式' },{ field: images.length || this.showFileUrl.length, message: '请先上传图片' }];const hasEmptyFields = requiredFields.some(field => !field.field);if (hasEmptyFields) {this.$toast(requiredFields.find(field => !field.field).message);return;}let params = {...this.formData,}params.images = [...this.showFileUrl, ...this.formData.images]console.log('最终参数---图片相对路径', params.images)// console.log('最终参数---', params)// returnthis.$dialog.confirm({message: '是否确认终判？'}).then(async () => {const res = await this.$api.finalConfirm(params)if (res.success) {this.$toast.success('确认成功')this.$router.push({ path: '/endJudgingScrapSteel' })}}).catch(() => {console.log('取消')})}},
};
</script>

四、源码

<template><van-uploaderclass="t-upload"v-model="fileList"v-bind="uploadAttrs"v-on="$listeners":before-read="beforeRead":before-delete="delImg":after-read="afterRead"/>
</template><script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {name: 'TUpload',props: {// 限制上传文件大小默认10MBlimitSize: {type: [Number, String],default: 10},// 限制上传的文件类型fileType: {type: String,default: '.jpg,.jpeg,.png'},// 最多上传个数限制totalLimit: {type: Number,default: 5},// 回显文件的list（内含：url-->对应完整路径）showFileList: {type: Array,default: () => {return []}},// 上传组件回显图片--相对路径数据showFileUrl: {type: Array,default: () => {return []}},// 服务器上传地址savePath: {type: String,default: `${process.env.VUE_APP_API_URL}/scmpda/file/upload`},},data() {return {fileList: [],fileUrls: [],showUrl: this.showFileUrl}},computed: {uploadAttrs() {return {'max-count': this.totalLimit,multiple: true,...this.$attrs}}},watch: {showFileList: {handler(val) {this.fileList = val}},showFileUrl: {handler(val) {this.showUrl = val}}},methods: {beforeRead(file) {// console.log('上传前', file)if (file instanceof Array) {file.forEach(item => {const isNotMatchType = this.fileType.indexOf('.' + item.name.slice(item.name.lastIndexOf('.') + 1).toLocaleLowerCase()) === -1if (isNotMatchType) {this.$toast.fail('请上传jpg或png格式的图片')return false}const overSize = item.size / (1024 * 1024) > this.limitSizeif (overSize) {this.$toast.fail(`上传文件不得大于${this.limitSize}MB`)return false}})} else {const isNotMatchType = this.fileType.indexOf('.' + file.name.slice(file.name.lastIndexOf('.') + 1).toLocaleLowerCase()) === -1if (isNotMatchType) {this.$toast.fail('请上传jpg或png格式的图片')return false}const overSize = file.size / (1024 * 1024) > this.limitSizeif (overSize) {this.$toast.fail(`上传文件不得大于${this.limitSize}MB`)return false}}if (file.length >= this.totalLimit) {this.$toast.fail(`最多上传${this.totalLimit}个文件`)return false}return true},delImg(fileMsg) {const delIndex = this.fileList.findIndex(item => item === fileMsg);if (delIndex > -1) {this.fileList.splice(delIndex, 1);const showIndex = delIndex - this.showFileList.length;if (fileMsg.url) {this.showUrl.splice(showIndex, 1);} else {this.fileUrls.splice(showIndex, 1);}}this.$emit(fileMsg.url ? 'showFile' : 'fileList', fileMsg.url ? this.showUrl : this.fileUrls);},afterRead(file) {if (file instanceof Array) {file.forEach(f => {f.status = 'uploading'f.message = '上传中...'this.uploadFile(f)})} else {file.status = 'uploading'file.message = '上传中...'this.uploadFile(file)}},async uploadFile(file) {const formDataFile = new FormData()formDataFile.append('file', file.file)const res = await axios({url: this.savePath,method: 'post',headers: {'Content-Type': 'multipart/form-data',Authorization: getToken()},data: formDataFile})if (res.data.success) {file.status = 'done'file.message = '上传成功'this.fileUrls.push(res.data.data)this.$toast('图片上传成功！')this.$emit('fileList', this.fileUrls)} else {file.status = 'failed'file.message = '上传失败'this.$toast('照片上传失败，请重新上传！')}}}
}
</script>

相关文章

基于ElementUi再次封装基础组件文档

---

基于ant-design-vue再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档