el-upload手动上传多张图片

需求：

需求为一次性上传多张图片，并可以为图片添加描述信息，且后端接口一次只能传一张图片

思路：

循环遍历上传的图片列表依次处理字段并请求接口，等所有的接口请求完成后再关闭弹框

先将上传图片转成base64格式，放入imageList再表格中展示

handleChange(file) {
            if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png' && file.raw.type !== 'image/gif') {
                this.$message.error('只能上传图片文件！');
                return false;
            }
            if(file.raw) {
                this.getBase64(file.raw, imageUrl => {
                    this.imageList.push({
                        describe: '',
                        imageUrl: imageUrl
                    });
                    this.previewSrcList.push(imageUrl);
                });
            }
        },
        getBase64(file, callback) {
            const reader = new FileReader(); // 用于读取文件
            reader.addEventListener('load', () => callback(reader.result));
            reader.readAsDataURL(file);
        }

再点击按钮时请求后端接口实现上传

submitUpload() {
            // 遍历循环上传图片
            let uploadPromises = this.imageList.map(item => {
                return new Promise((resolve, reject) => {
                    let params = {
                        PIC_INFO: item.imageUrl,
                        PIC_DES: item.describe,
                        WORK_ID: this.workGuid,
                        DES_TYPE: this.title
                    }
                    api.UploadWorkImg(params).then(res => {
                        resolve(res); // 上传成功
                    }).catch(error => {
                        this.$message.error('上传图片失败：', error);
                        reject(error); // 上传失败
                    });
                });
            });
            Promise.all(uploadPromises).then(() => {
                // 所有图片上传完成后的操作
                this.$message.success('图片上传成功');
                this.uploadVisible = false;
                this.title = '';
                this.workGuid = '';
            }).catch(error => {
                // 如果有上传失败的情况，处理错误
                this.$message.error('至少有一张图片上传失败', error);
            });
        }