electron-vue打开文件夹选中多张图片发送给后台的实现

目标： 后台提供了一个上传图片的接口，如果要同时上传多张图片，需要将图片转换成base64，然后用数组格式进行上传。
文中用到的基本功能：
1、electron的打开文件夹功能。相关api是dialog
2、node的fs模块。
3、element-ui的图片预览组件。组件是el-image
具体流程：
1、上传图集按钮

<el-button size="mini" type="warning" @click="uploadClick">上传图集</el-button>

2、打开文件夹对话框，以及将图片转成base64格式的代码。

 // 上传图集
    uploadClick() {
      dialog.showOpenDialog(
        {
          filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }],
          properties: ['openFile', 'multiSelections'] // 可以选择文件且可以多选
        },
        (result) => {
          if (result && result.length > 0) {
            // 返回的result是一个图片路径的数组
            result.forEach((item) => {
              fs.readFile(item, (err, data) => {
                if (err) throw err
                let file = new File([data], 'tem.jpg', { type: 'image/jpg' })
                // 将图片转成base64
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = (e) => {
                  // push进数组进行展示
                  this.srcList.push(e.target.result)
                }
              })
            })
          }
        }
      )
    }

3、展示图片的代码，用的是element-ui

<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
</el-image>

最后： 现在srcList里面保存的即是base64格式的图片数组。可以直接调用接口进行上传。
总结： 基本思想是将图片选中后通过fs读取进来，然后先转换成base64进行显示，最后统一上传。显示和上传得分两步进行，因为转base64与fs读取图片都是异步操作，必须先将图片全部读取显示后，才能实现一次性上传。而且先显示，可以预览或者对选错的图片进行删除操作。