前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩

前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13099

效果图如下：

1.0.0（2023-06-18）

组件初始化

使用方法

<!-- 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代码部分

<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>