vuejs| 通过promise实现图片批量上传

需求

• 批量上传头像，且头像能上传到对应的人员信息上
• 上传限制
• 不是立刻上传

修改默认样式

因为觉得element组件的el-upload有点复杂，所以这里使用原始的input标签。不过通常需要换掉原始样式，只需给input添加一条style="display:none"，接着用具有其他样式的元素包裹它，并在该元素上添加事件（不包裹也行，包裹主要是为了容易看）。

<el-button  @click="beforeImagesUpload">批量上传图片
    <input type="file" style="display:none" id="file" multiple>
</el-button>

点击触发该事件相当于点击了里面的input元素

beforeImagesUpload(){
    let file = document.querySelector('#file')//获取最原始的input元素
    file.click()//触发
}

保存图片信息

现在要在上面的beforeImagesUpload进行丰富。由于我希望头像能上传到对应的人员信息上，那么我至少需要有一个标识帮助我识别这个头像属于谁。所以上传前先要求用户将图片命名为对应的id，接着前端通过图片名称来获取对应的标识进行文件上传。

这里先了解一下图片文件的数据格式：

如果不想立刻上传，那么很容易想到的办法就是先将文件储存起来：

fileList:[]

async beforeImagesUpload(){
    let fileList=[]
    let file = document.querySelector('#file')
    file.click()
    file.onchange = function (event) {
      let files = event.target.files
      for(let i=0;i<files.length;i++){
            let file=files[i]
            let filename=file.name//获取图片名称（有后缀）
            let id=filename.slice(0,filename.indexOf('.'))//获取图片名称（无后缀）
            fileList.push({file:file,id:id,filename:filename})//整合成新的图片对象，并将其加进图片列表中
        }
	}
    console.log(fileList)//出错
}

然而，你会发现控制台打印数据是空的。这是由于同步致使函数直接跳过处理图片的部分，马上到了后面的console.log(fileList)

Promise实现异步

这时可以使用promise对象解决。promise对象的函数内有两个参数：resolve和reject，它们是两个回调函数，前者表示成功时的回调，后者表示失败时的回调，这里先不考虑reject的情况：

async beforeImagesUpload(){
  let that=this//改变作用域
  let promise= new Promise(function (resolve, reject) {
      let fileList=[]
      let file = document.querySelector('#file')
      file.click()
      file.onchange = function (event) {
        let files = event.target.files
      	for(let i=0;i<files.length;i++){
            let file=files[i]
            let filename=file.name
            let id=filename.slice(0,filename.indexOf('.'))
            fileList.push({file:file,id:id,filename:filename})
        }
        resolve(fileList)//通过resolve将fileList抛出，在后续使用
    }
  })
  
  //接着就是处理抛出来的数据了：
  //promise接受两个回调函数作为参数：一个状态变为Resolved时调用，一个是状态变为Reject时调用。
  //这两个函数都接受Promise对象传出的值作为参数。
  //第二个函数是可选的,这里先不考虑第二个函数。
  promise.then(function(value) {
    //状态为resolved时调用，这里的value就是resolve抛出的数据
    console.log(value)//成功打印
    that.fileList=value//储存
  });
  
},

为了更好的处理数据，建议把value传给另一个函数处理：

promise.then(function(value) {
    	that.upload(value)//正式上传 后面写
	}
)

添加限制

假设上传图片有两个前提：

1.最多只能上传10张

2.图片大小不能大于300k

这里reject就派上用场的了。现在修改一下promise对象中的内容：

//...
let promise= new Promise(function (resolve, reject) {
    //...
    file.onchange = function (event) {
      let files = event.target.files
      
      //1.判断图片数量
      if(files.length>10){
        reject('page')//如果多于10张，判定为失败，抛出错误'page'，停止向下运行。
      }else{
        for(let i=0;i<files.length;i++){
          let file=files[i]
          
          //2.判断图片大小
          const is300K=file.size>300*1024//判定指标，是否大于300k
          if (is300K) {
            reject('size')//如果大于300k，判定为失败，抛出错误'size'，停止向下运行。
          }
          
          let fileName=file.name
          let phone=fileName.slice(0,fileName.indexOf('.'))
          fileList.push({file:file,phone:phone,fileName:fileName})
        }
      }
      resolve(fileList)//上面均没有出错时抛出
  }
})

接下来就是处理回调函数：

async beforeImagesUpload(){
  //...
  let promise= new Promise(function (resolve, reject) {
      //...
  })
  
  
  //这里需要promise的第二个回调函数，在状态为Reject时调用：
  promise.then(function(value) {
    that.upload(value)//正式上传
  }, function(error) {
    //上面设置了两种错误，这里可以用if来判断错误类型，并给出对应的响应
    if(error=='page'){
      that.$message.error('最多只能上传10张照片！')
    }else if(error=='size'){
      that.$message.error('上传的图片大小不能超过300K!');
    }
  });
    
  
},

图片上传

不是立刻上传，需要将upload(value)传过来的值先保存起来，如this.fileList=value，再经过中间函数处理，配合弹框使用。

为了简便，这里就直接上传了。批量上传，说白了其实就是一个一个地上传，这里我使用的是axios插件：

upload(value){
  value.map(item=>{
    let fd = new FormData()
    fd.append('image',item.file)
    fd.append('id',item.id)
    axios.post("url",fd,{headers:{'Content-Type': 'multipart/form-data'}})
  })
},