## 1 安裝環境 ### Node.js js的運行環境，相當於 java 的 jvm 官網：https://nodejs.org/en，下載最新穩定版 `18.16.0 LTS`，雙擊安裝即可 自動安裝了npm，終端驗證： ```bash C:\Users\Administrator>node ...
前端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>
