js多张图片上传 也拿到多张图片的路径 在页面上展示只显示一张?只执行了一次???
self.$els.uploader.addEventListener('change', function () {
if (this.files.length < 4 && self.uploadImgList.length >= 3) {
window.alert('您最多能上传4张图片')
return
}
for (var i = 0; i < this.files.length; i++) {
var formData = new window.FormData()
formData.append('refundProof', this.files[i])
console.log('您好' + this.files[i].size)
if (this.files[i].size < 5000000) {
formData.append('width', 120)
formData.append('height', 200)
var xhr = new window.XMLHttpRequest()
xhr.open('POST', config.root + '/' + config.uploadImageFile)
xhr.onload = function (e) {
if (xhr.status === 200) {
// 上传成功
// 把处理的好的图片给用户看
var data = JSON.parse(e.target.response)
if (data.success) {
// 这里只执行了一次就结束了,所以数组uploadImgList.leng=0 这是???
if (self.uploadImgList.length <= 3) {
self.uploadImgList.push(data.result.compressFilePath)
self.refundProofList.push(data.result.compressFileStoragePath)
console.log(data.result)
} else {
window.alert('您最多能上传4张图片')
}
if (self.refundImage) {
self.refundImage = false
}
} else {
}
} else {
}
}
xhr.onerror = function () {
// 处理错误
console.log('error', xhr)
}
xhr.send(formData)
} else {
window.alert('图片最大为5MB,您的图片超过规定的大小,请重新上传')
}
}
})
你最上面已经判断了,下面还需要循环么?本来ajax就在循环体里面,直接就上传一张显示一张好了
控制上传的数量就行,还需要控制上传后的显示的数量?