前臺頁面：
<!-- 圖片上傳 -->
<wslimg title="圖片上傳" :num="9" :dataList="dataList" @chooseImg="chooseImg" @close="close($event)"></wslimg>
<view><progress :percent="percent" strock-width="10"></progress><text style="color: #00BFFF;margin-left: 48%;">{{percent}}%</text></view>
<view class="btn-logout" hover-class="btn-logout-hover" @tap="uploadImg()">
<text>開始上傳</text>
</view>
<script>
// 註冊一個進度條
var _self;
import wslimg from '@/components/wsl-img/zw-upload-img.vue'
export default {
components: {
wslimg
},
data() {
return {percent: 0,
dataList: []
},
methods: {
chooseImg() {
uni.chooseImage({
sourceType: ['camera', 'album'],
sizeType: ['compressed', 'original'],
count: this.num - this.dataList.length,
success: res => {
console.log(res)
this.dataList = this.dataList.concat(res.tempFilePaths);
console.log(this.dataList + "=========================")
}
});
},
close(e) {
console.log(e);
this.dataList = e;
},
uploadImg() {
console.log(this.dataList + "--++---")
console.log(this.imgURl + "addProFile" + "-----")
let imgs = this.dataList.map((value, index) => {
console.log("---===" + index);
return {
name: "image" + index,
uri: value
}
})
var uper = uni.uploadFile({
url: this.imgURl + "addProFile",
files: imgs,
name: 'file',
formData: {
'totalNum': this.dataList.length
},
success: (res) => {
console.log(res.data + "-------------");
var result = JSON.parse(res.data);
console.log(result.msg + "-------------");
if (result.ret) {
uni.showToast({
title: result.msg,
icon: 'success'
});
}
},
fail: (res) => {
uni.showToast({
title: "失敗",
icon: "none"
});
console.log(res)
}
});
// onProgressUpdate 上傳對象更新的方法
uper.onProgressUpdate(function(res) {
// 進度條等於 上傳到的進度
_self.percent = res.progress
console.log('上傳進度' + res.progress)
console.log('已經上傳的數據長度' + res.totalBytesSent)
console.log('預期需要上傳的數據總長度' + res.totalBytesExpectedToSend)
})
}
}
後臺接收：
control：
@PostMapping(value = "/addProFile", headers = "content-type=multipart/form-data")
@ResponseBody
public Map<String, Object> uploadFile(MultipartRequest request,Integer num){
Map<String,Object> map = new HashMap<String,Object>();
// 這樣就可以收到文件了，files.length == 1.
System.err.println(num+"=============================");
List<MultipartFile> files=new ArrayList<MultipartFile>();
for (int i=0;i<num;i++){
System.err.println(request.getFile("image"+i)+"=============================");
/* System.err.println(request.getFile("image"+i)+"=============================");*/
files.add(request.getFile("image"+i));
}
System.err.println(files.size()+"=============================");
// 後續操作省略
map.put("success", true);
return map;
}