代码 是直接拷贝 项目中写的 没有做简化 许多内容 是调用 项目中的数据 可以忽略掉
1.代码中uploadSectionFile()是封装的 上传图片到阿里云的一个公用方法，其结果 用 Promise 返回
代码示例：
Vue.prototype.uploadSectionFile = function (key, fileList) {return new Promise((resolve, reject) => {const imgfile = fileList.rawlet OSS = require('ali-oss')let ossConfig = {region: key.region,accessKeyId: key.sts.accessKeyId,accessKeySecret: key.sts.accessKeySecret,stsToken: key.sts.securityToken,bucket: key.bucket}let client = new OSS(ossConfig)// your_route是你要上传文件夹的路径，后端同事可以返给你也可以自己拼接，比如你的bucket下有个文件夹叫pc,你要上传到pc这个文件夹下，your_route就是‘/pc/’,file是你的上传的filelet time = new Date().getTime()const storeAs = key.path + time + this.random_string(16) + '.' + imgfile.type.split('/').pop()client.multipartUpload(storeAs, imgfile, {// 记录断点, 如果关闭了浏览器，然后重新启动继续上传的话，是不行的，请参考上边对file对象的描述}).then(results => {let img = {typeName: fileList.typeName,typeIndex: fileList.typeIndex,name: results.name.split('/').pop(),url: `${results.name}`}resolve(img)})})}
2.代码中getOssInfo()是封装的 向后台 请求阿里云 上传权限的方法
3.代码中Promise.all()可以请求一组数据 格式 是以数组的方式发送 其结果用then()方法接收 then 有两个参数 第一个是成功，第二个是失败
代码示例：
Promise.all([uploadSectionFile(data1), uploadSectionFile(data2)]).then(function (results) {let [data1, data2] = results // 结构赋值 ES6 特性console.log(data1) // 打印data1结果console.log(data2) // 打印data2结果}, function () {console.log('失败') // 只要有一个结果失败 就全失败})
// 此处 开始 请求数据
用async 使其函数 变成同步方法async getPhotoUrl () {await this.getOssInfo() // 等待请求阿里云 权限// 从本地 localStorage 获取权限var keyList = JSON.parse(localStorage.getItem('ossInfo')) let _that = thislet catPromiseArr = [] // 将使用 Promise.all 的请求数据 数组let listPromiseArr = [] // 将使用 Promise.all 的请求数据 数组// 合并请求商品图片 数据this.imgUrlListCat.forEach((element, index) => {element.typeIndex = indexif (element.raw) {// 循环 把所有想要的数据 放到数组里catPromiseArr.push(this.uploadSectionFile(keyList, element))}})// 合并请求多规格图片 数据this.imgUrlList.forEach((element, index) => {if (element[0].raw) {// 循环 把所有想要的数据 放到数组里listPromiseArr.push(this.uploadSectionFile(keyList, element[0]))}})// 请求商品图片url// 开始请求 数据 await Promise.all(catPromiseArr).then(function (results) {results.forEach(ele => {_that.imgUrlListCat.splice(ele.typeIndex, 1, ele)})}, function () {_that.$Message.error('商品图片上传失败！')})// 请求多规格图片url// 等待 上次 Promise.all 结束后 请求第二条 数据await Promise.all(listPromiseArr).then(function (results) {results.forEach(ele => {_that.imgUrlList.splice(ele.typeIndex, 1, [ele])})}, function () {_that.$Message.error('多规格图片上传失败！')})// 等待 第二条数据 请求结束 后 开始调用 向后台提交数据的方法// 调用验证，提交数据方法this.handleSubmit('formValidate')},
