Finished: rename file before upload

src/main/utils/img2base64.js

@@ -2,17 +2,51 @@ import fs from 'fs-extra'
 import path from 'path'
 import sizeOf from 'image-size'
 import fecha from 'fecha'
+import { BrowserWindow, ipcMain } from 'electron'
+import db from '../../datastore/index.js'
+const renameURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#rename-page` : `file://${__dirname}/index.html#rename-page`
+
+const createRenameWindow = () => {
+  let options = {
+    height: 175,
+    width: 300,
+    show: true,
+    fullscreenable: false,
+    resizable: false,
+    vibrancy: 'ultra-dark',
+    webPreferences: {
+      backgroundThrottling: false
+    }
+  }
+
+  if (process.platform === 'win32') {
+    options.show = true
+    options.backgroundColor = '#3f3c37'
+  }
+
+  const window = new BrowserWindow(options)
+  window.loadURL(renameURL)
+  return window
+}
 
 const imgFromPath = async (imgPath) => {
   let results = []
+  let rename = db.read().get('picBed.rename').value()
   await Promise.all(imgPath.map(async item => {
+    let name
+    let fileName = path.basename(item)
+    if (rename) {
+      const window = createRenameWindow()
+      await waitForShow(window.webContents)
+      window.webContents.send('rename', fileName, window.webContents.id)
+      name = await waitForRename(window, window.webContents.id)
+    }
     let buffer = await fs.readFile(item)
     let base64Image = Buffer.from(buffer, 'binary').toString('base64')
-    let fileName = path.basename(item)
     let imgSize = sizeOf(item)
     results.push({
       base64Image,
-      fileName,
+      fileName: name || fileName,
       width: imgSize.width,
       height: imgSize.height,
       extname: path.extname(item)
@@ -21,13 +55,21 @@ const imgFromPath = async (imgPath) => {
   return results
 }
 
-const imgFromClipboard = (file) => {
+const imgFromClipboard = async (file) => {
   let result = []
+  let rename = db.read().get('picBed.rename').value()
   if (file !== null) {
-    const today = fecha.format(new Date(), 'YYYYMMDDHHmmss')
+    let name
+    const today = fecha.format(new Date(), 'YYYYMMDDHHmmss') + '.png'
+    if (rename) {
+      const window = createRenameWindow()
+      await waitForShow(window.webContents)
+      window.webContents.send('rename', today, window.webContents.id)
+      name = await waitForRename(window, window.webContents.id)
+    }
     result.push({
       base64Image: file.imgUrl.replace(/^data\S+,/, ''),
-      fileName: `${today}.png`,
+      fileName: name || today,
       width: file.width,
       height: file.height,
       extname: '.png'
@@ -38,10 +80,18 @@ const imgFromClipboard = (file) => {
 
 const imgFromUploader = async (files) => {
   let results = []
+  let rename = db.read().get('picBed.rename').value()
   await Promise.all(files.map(async item => {
+    let name
+    if (rename) {
+      const window = createRenameWindow()
+      await waitForShow(window.webContents)
+      window.webContents.send('rename', item.name, window.webContents.id)
+      name = await waitForRename(window, window.webContents.id)
+    }
     let buffer = await fs.readFile(item.path)
     let base64Image = Buffer.from(buffer, 'binary').toString('base64')
-    let fileName = item.name
+    let fileName = name || item.name
     let imgSize = sizeOf(item.path)
     results.push({
       base64Image,
@@ -54,6 +104,27 @@ const imgFromUploader = async (files) => {
   return results
 }
 
+const waitForShow = (webcontent) => {
+  return new Promise((resolve, reject) => {
+    webcontent.on('dom-ready', () => {
+      resolve()
+    })
+  })
+}
+
+const waitForRename = (window, id) => {
+  return new Promise((resolve, reject) => {
+    ipcMain.once(`rename${id}`, (evt, newName) => {
+      resolve(newName)
+      window.hide()
+    })
+    window.on('close', () => {
+      resolve(null)
+      ipcMain.removeAllListeners(`rename${id}`)
+    })
+  })
+}
+
 export {
   imgFromPath,
   imgFromClipboard,

src/main/utils/tcYunUpload.js

@@ -63,7 +63,7 @@ const postOptions = (fileName, signature, imgBase64) => {
   } else {
     return {
       method: 'PUT',
-      url: `http://${options.bucket}.cos.${options.area}.myqcloud.com/${path}${fileName}`,
+      url: `http://${options.bucket}.cos.${options.area}.myqcloud.com/${path}${encodeURI(fileName)}`,
       headers: {
         Host: `${options.bucket}.cos.${options.area}.myqcloud.com`,
         Authorization: `q-sign-algorithm=sha1&q-ak=${options.secretId}&q-sign-time=${signature.signTime}&q-key-time=${signature.signTime}&q-header-list=host&q-url-param-list=&q-signature=${signature.signature}`,

src/renderer/components/RenamePage.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="rename-page">
+    <el-form>
+      <el-form-item
+        label="文件改名"
+      >
+        <el-input 
+          v-model="fileName"
+          size="small"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <div class="pull-right">
+        <el-button @click="cancel" round size="mini">取消</el-button>
+        <el-button type="primary" @click="confirmName" round size="mini">确定</el-button>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'rename-page',
+  data () {
+    return {
+      fileName: '',
+      id: null
+    }
+  },
+  created () {
+    this.$electron.ipcRenderer.on('rename', (event, name, id) => {
+      this.fileName = name
+      this.id = id
+    })
+  },
+  methods: {
+    confirmName () {
+      this.$electron.ipcRenderer.send(`rename${this.id}`, this.fileName)
+    },
+    cancel () {
+      this.$electron.ipcRenderer.send(`rename${this.id}`, null)
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('rename')
+  }
+}
+</script>
+<style lang='stylus'>
+  #rename-page
+    padding 0 20px
+    .pull-right
+      float right
+    .el-form-item__label
+      color #ddd
+</style>

src/renderer/components/SettingView/PicGoSetting.vue

@@ -48,6 +48,7 @@
               v-model="form.rename"
               active-text="开"
               inactive-text="关"
+              @change="handleRename"
             ></el-switch>
           </el-form-item>
           <el-form-item
@@ -58,8 +59,9 @@
               @change="handleShowPicBedListChange"
             >
               <el-checkbox
-                v-for="(item, index) in picBed"
+                v-for="item in picBed"
                 :label="item.name"
+                :key="item.name"
               ></el-checkbox>
             </el-checkbox-group>
           </el-form-item>
@@ -212,6 +214,9 @@ export default {
     handleAutoStartChange (val) {
       this.$db.read().set('picBed.autoStart', val).write()
       this.$electron.ipcRenderer.send('autoStart', val)
+    },
+    handleRename (val) {
+      this.$db.read().set('picBed.rename', val).write()
     }
   },
   beforeDestroy () {

src/renderer/components/SettingView/Upload.vue

@@ -173,11 +173,10 @@ export default {
   #file-uploader
     display none
   .upload-progress
-    margin-top 20px
     opacity 0
     transition all .2s ease-in-out
     width 450px
-    margin-left 25px
+    margin 20px auto 0
     &.show
       opacity 1
     .el-progress-bar__inner

src/renderer/router/index.js

@@ -10,6 +10,11 @@ export default new Router({
       name: 'tray-page',
       component: require('@/components/TrayPage').default
     },
+    {
+      path: '/rename-page',
+      name: 'rename-page',
+      component: require('@/components/RenamePage').default
+    },
     {
       path: '/setting',
       name: 'setting-page',