随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。
组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。
本文给大家介绍的组件是：
前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13099
更多前端组件信息请关注微信公众号： 前端组件开发
效果图如下：
组件初始化
#### 使用方法
```使用方法
<!-- count： 最大上传数量 imageList: 图片上传选择数组-->
<cc-imgPreDelUpload :count="6" :imageList="imgList"></cc-imgPreDelUpload>
<!-- 上传请求事件 -->
goUploadClick() {
if (this.imgList.length < 1) {
uni.showModal({
title: '温馨提示',
content: '请上传图片'
})
return;
}
console.log('图片上传数组 = ' + JSON.stringify(this.imgList));
// 服务器地址上传地址 仅为示例，非真实的接口地址
let baseUrl = "http://gzcc.com/cc//appSc/up"
uni.showLoading({
title: '上传中'
})
const uploadTask = uni.uploadFile({
url: baseUrl, //仅为示例，非真实的接口地址
files: this.imgList, //请求图片数组
formData: {}, //请求参数
success: (uploadFileRes) => {
uni.hideLoading();
console.log('上传成功 = ' + uploadFileRes.data);
}
});
uploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != String) {
res.progress = '0';
}
// 此处为了模拟上传进度
uni.showLoading({
title: '上传进度: ' + res.progress + '%'
})
console.log('上传进度' + res.progress);
console.log('已经上传的数据长度' + res.totalBytesSent);
console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
});
}
}
```
#### HTML代码部分
```html
<template>
<view class="content">
<!-- count： 最大上传数量 imageList: 图片上传选择数组-->
<cc-imgPreDelUpload :count="6" :imageList="imgList"></cc-imgPreDelUpload>
<button style="width: 120px;background-color: antiquewhite; margin-top: 60px;" @click="goUploadClick"> 上传
</button>
</view>
</template>
<script>
export default {
data() {
return {
imgList: []
}
},
methods: {
goUploadClick() {
if (this.imgList.length < 1) {
uni.showModal({
title: '温馨提示',
content: '请上传图片'
})
return;
}
console.log('图片上传数组 = ' + JSON.stringify(this.imgList));
// 服务器地址上传地址 仅为示例，非真实的接口地址
let baseUrl = "http://gzcc.com/cc//appSc/up"
uni.showLoading({
title: '上传中'
})
const uploadTask = uni.uploadFile({
url: baseUrl, //仅为示例，非真实的接口地址
files: this.imgList, //请求图片数组
formData: {}, //请求参数
success: (uploadFileRes) => {
uni.hideLoading();
console.log('上传成功 = ' + uploadFileRes.data);
}
});
uploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != String) {
res.progress = '0';
}
// 此处为了模拟上传进度
uni.showLoading({
title: '上传进度: ' + res.progress + '%'
})
console.log('上传进度' + res.progress);
console.log('已经上传的数据长度' + res.totalBytesSent);
console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
</style>
```