温州网站开发网站的制作,网页设计作业制作个人网站,wordpress 开发插件,公司网站开发项目管理制度在使用 vue vant2.13.2 技术栈的项目中#xff0c;因为上传文件的接口是单文件上传#xff0c;当使用批量上传时#xff0c;只能循环调取接口#xff1b;然后有校验内容#xff1a;需要所有文件上传成功后才能保存#xff0c;在文件上传不成功时点击保存按钮#xff0c…在使用 vue vant2.13.2 技术栈的项目中因为上传文件的接口是单文件上传当使用批量上传时只能循环调取接口然后有校验内容需要所有文件上传成功后才能保存在文件上传不成功时点击保存按钮则提示信息文件上传未成功。
我使用 for 循环调取接口然后定义了 promiseList 数组循环一次将 promise 对象添加一次然后使用 Promise.all(promiseList).then(resultconsole.log(result)) 来改变保存的状态。但是发现打印出的 result 总是空数组[]。debugger 代码的执行顺序应该是异步的原因导致的。
如下代码
/** 上传文件组件 */
van-uploadernamemultipartFilemultiplev-modeljobFileList:after-read(file) afterRead(file, jobFileList) // 默认写法参数只有file对象如需传递其他参数则需要此种写法:before-read(file) beforeRead(file, jobFileList):before-delete(file) beforeDelete(file, jobFileList):max-count9/van-uploader下面上传了一张图片文件格式如下图其中 fileId、fileName、fileType、fileUrl 为自定义字段上传服务器成功后返回的其他字段为 van-uploader 组件所支持的自有字段。
/** 上传文件逻辑 */
afterRead(file) {const _this this;this.isFetchDone 1; // 文件是否全部上传完成0是 1否let promiseList [];if (!Array.isArray(file)) {// 单张图片上传promiseList [file];} else {// 批量上传promiseList file;}for (const f of file) {// 压缩文件new Compressor(f.file, {quality: 0.5,success(result) {// blob格式转换为file格式f.file new File([result], result.name, { type: result.type });const p _this.uploadFileChange(f);promiseList.push(p);},error(err) {console.warn(err.message);},});}// 使用Promise.all()改变保存状态Promise.all(promiseList).then(result {console.log(result); // []// 所有的文件状态都是done则代表文件全部上传完成 const bool result.every(file file.status done);if (bool) {// 改变保存状态为0可保存this.isFetchDone 0;}})
}
/** 上传文件逻辑 */
uploadFileChange(f) {return new Promise((resolve, reject) {f.status uploading;f.message 上传中...;// 上传图片要formData类型const formData new FormData();formData.append(multipartFile, f.file);// 上传文件接口uploadFile(formData).then((response) {const { data, resultCode, resultMessage } response;if (resultCode 0 data) {f.fileId data.fileId;f.fileName data.fileName;f.fileType data.fileType;f.fileUrl data.fileUrl;f.status done;f.message 上传完成;resolve(f);} else {f.status failed;f.message 上传失败;reject(resultMessage);}}).catch(err {f.status failed;f.message 上传失败;reject(err)});})
},上面代码的执行顺序是先执行 for 循环然后直接执行了 Promise.all()最后执行 promiseList.push()因为 for 和 Promise.all()都是同步代码所以在 Promise.all(promiseList) 执行时promiseList 其实是一个空数组所以 then 最终返回的是一个空数组。
我选择的修改方式是将 for 循环放到了 Promise.all() 中如下
afterRead(file) {const _this this;this.isFetchDone 1;let promiseList [];if (!Array.isArray(file)) {// 单张图片上传promiseList [file];} else {// 批量上传promiseList file;}/** 可以将 promiseList.map 单独封装成一个函数放在这里优化代码 */Promise.all(promiseList.map(f {return new Promise((resolve, reject) {// 压缩文件new Compressor(f.file, {quality: 0.5,success(result) {// blob格式转换为file格式f.file new File([result], result.name, { type: result.type });f.status uploading;f.message 上传中...;// 上传图片要formData类型const formData new FormData();formData.append(multipartFile, f.file);// 上传文件接口uploadFile(formData).then((response) {const { data, resultCode, resultMessage } response;if (resultCode 0 data) {f.fileId data.fileId;f.fileName data.fileName;f.fileType data.fileType;f.fileUrl data.fileUrl;f.status done;f.message 上传完成;resolve(f);} else {f.status failed;f.message 上传失败;reject(resultMessage);}}).catch(err {f.status failed;f.message 上传失败;reject(err);})},error(err) {console.warn(err.message);},});})})).then(result {const bool result.every(file file.status done);if (bool) {this.isFetchDone 0;}})
},
