前端Vue圖片上傳組件支持單個(gè)文件多個(gè)文件上傳 自定義上傳數(shù)量 預(yù)覽刪除圖片 圖片壓縮， 下載完整代碼請(qǐng)?jiān)L問(wèn)uni-app插件市場(chǎng)址:https://ext.dcloud.net.cn/plugin?id=13099
效果圖如下：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-489845.html
1.0.0（2023-06-18）
組件初始化文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-489845.html
使用方法
<!-- count： 最大上傳數(shù)量? imageList: 圖片上傳選擇數(shù)組-->
<cc-imgPreDelUpload :count="6" :imageList="imgList"></cc-imgPreDelUpload>
<!-- 上傳請(qǐng)求事件 -->
goUploadClick() {
if (this.imgList.length < 1) {
uni.showModal({
title: '溫馨提示',
content: '請(qǐng)上傳圖片'
})
return;
}
console.log('圖片上傳數(shù)組 = ' + JSON.stringify(this.imgList));
// 服務(wù)器地址上傳地址 僅為示例，非真實(shí)的接口地址
let baseUrl = "http://gzcc.com/cc//appSc/up"
uni.showLoading({
title: '上傳中'
})
const uploadTask = uni.uploadFile({
url: baseUrl, //僅為示例，非真實(shí)的接口地址
files: this.imgList, //請(qǐng)求圖片數(shù)組
formData: {}, //請(qǐng)求參數(shù)
success: (uploadFileRes) => {
uni.hideLoading();
console.log('上傳成功 = ' + uploadFileRes.data);
}
});
uploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != String) {
res.progress = '0';
}
// 此處為了模擬上傳進(jìn)度
uni.showLoading({
title: '上傳進(jìn)度: ' + res.progress + '%'
})
console.log('上傳進(jìn)度' + res.progress);
console.log('已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度' + res.totalBytesSent);
console.log('預(yù)期需要上傳的數(shù)據(jù)總長(zhǎng)度' + res.totalBytesExpectedToSend);
});
}
}
HTML代碼部分
<template>
<view class="content">
<!-- count： 最大上傳數(shù)量? imageList: 圖片上傳選擇數(shù)組-->
<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: '請(qǐng)上傳圖片'
})
return;
}
console.log('圖片上傳數(shù)組 = ' + JSON.stringify(this.imgList));
// 服務(wù)器地址上傳地址 僅為示例，非真實(shí)的接口地址
let baseUrl = "http://gzcc.com/cc//appSc/up"
uni.showLoading({
title: '上傳中'
})
const uploadTask = uni.uploadFile({
url: baseUrl, //僅為示例，非真實(shí)的接口地址
files: this.imgList, //請(qǐng)求圖片數(shù)組
formData: {}, //請(qǐng)求參數(shù)
success: (uploadFileRes) => {
uni.hideLoading();
console.log('上傳成功 = ' + uploadFileRes.data);
}
});
uploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != String) {
res.progress = '0';
}
// 此處為了模擬上傳進(jìn)度
uni.showLoading({
title: '上傳進(jìn)度: ' + res.progress + '%'
})
console.log('上傳進(jìn)度' + res.progress);
console.log('已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度' + res.totalBytesSent);
console.log('預(yù)期需要上傳的數(shù)據(jù)總長(zhǎng)度' + res.totalBytesExpectedToSend);
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
</style>
到了這里，關(guān)于前端Vue圖片上傳組件支持單個(gè)文件多個(gè)文件上傳 自定義上傳數(shù)量 預(yù)覽刪除圖片 圖片壓縮的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
