Partly finished: weibo picbed

src/main/index.js

@@ -2,7 +2,8 @@
 
 import { weiboUpload } from './utils/weiboUpload.js'
 import { app, BrowserWindow, Tray, Menu, Notification, clipboard, ipcMain } from 'electron'
-import db from '../datastore/index'
+import db from '../datastore'
+import pasteTemplate from './utils/pasteTemplate'
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@@ -29,7 +30,7 @@ function createTray () {
       label: 'Quit'
     },
     {
-      label: 'Open setting Window',
+      label: '打开详细窗口',
       click () {
         if (settingWindow === null) {
           createSettingWindow()
@@ -38,6 +39,26 @@ function createTray () {
           settingWindow.focus()
         }
       }
+    },
+    {
+      label: '选择默认图床',
+      type: 'submenu',
+      submenu: [
+        {
+          label: '微博图床',
+          type: 'radio',
+          checked: db.read().get('picBed.current').value() === 'weibo'
+        },
+        {
+          label: '七牛图床',
+          type: 'radio',
+          checked: db.read().get('picBed.current').value() === 'qiniu',
+          click () {
+            db.read().set('picBed.current', 'qiniu')
+              .write()
+          }
+        }
+      ]
     }
   ])
   tray.on('right-click', () => {
@@ -69,9 +90,10 @@ function createTray () {
   })
 
   tray.on('drop-files', async (event, files) => {
-    const imgs = await weiboUpload(files, 'imgFromPath')
+    const pasteStyle = db.read().get('picBed.pasteStyle') || 'markdown'
+    const imgs = await weiboUpload(files, 'imgFromPath', window.webContents)
     for (let i in imgs) {
-      clipboard.writeText(imgs[i].imgUrl)
+      clipboard.writeText(pasteTemplate(pasteStyle, imgs[i].imgUrl))
       const notification = new Notification({
         title: '上传成功',
         body: imgs[i].imgUrl,
@@ -81,7 +103,6 @@ function createTray () {
         notification.show()
       }, i * 100)
     }
-    console.log('drag-files')
     window.webContents.send('dragFiles', imgs)
   })
   toggleWindow()
@@ -160,15 +181,6 @@ const toggleWindow = () => {
   }
 }
 
-// const toggleSettingWindow = () => {
-//   if (settingWindow.isVisible()) {
-//     settingWindow.hide()
-//   } else {
-//     settingWindow.show()
-//     settingWindow.focus()
-//   }
-// }
-
 const showWindow = () => {
   const position = getWindowPosition()
   window.setPosition(position.x, position.y, false)
@@ -177,8 +189,9 @@ const showWindow = () => {
 }
 
 ipcMain.on('uploadClipboardFiles', async (evt, file) => {
-  const img = await weiboUpload(file, 'imgFromClipboard')
+  const img = await weiboUpload(file, 'imgFromClipboard', window.webContents)
-  clipboard.writeText(img[0].imgUrl)
+  const pasteStyle = db.read().get('picBed.pasteStyle') || 'markdown'
+  clipboard.writeText(pasteTemplate(pasteStyle, img[0].imgUrl))
   const notification = new Notification({
     title: '上传成功',
     body: img[0].imgUrl,
@@ -187,8 +200,26 @@ ipcMain.on('uploadClipboardFiles', async (evt, file) => {
   notification.show()
   clipboard.clear()
   window.webContents.send('clipboardFiles', [])
-  window.webContents.send('uploadClipboardFiles', img)
+  window.webContents.send('uploadFiles', img)
-  console.log('clipboard-upload')
+})
+
+ipcMain.on('uploadChoosedFiles', async (evt, files) => {
+  const imgs = await weiboUpload(files, 'imgFromUploader', settingWindow.webContents)
+  const pasteStyle = db.read().get('picBed.pasteStyle') || 'markdown'
+  let pasteText = ''
+  for (let i in imgs) {
+    pasteText += pasteTemplate(pasteStyle, imgs[i].imgUrl) + '\r\n'
+    const notification = new Notification({
+      title: '上传成功',
+      body: imgs[i].imgUrl,
+      icon: files[i].path
+    })
+    setTimeout(() => {
+      notification.show()
+    }, i * 100)
+  }
+  clipboard.writeText(pasteText)
+  window.webContents.send('uploadFiles', imgs)
 })
 
 app.on('ready', () => {

src/main/utils/img2base64.js

@@ -29,7 +29,26 @@ const imgFromClipboard = (file) => {
   return result
 }
 
+const imgFromUploader = async (files) => {
+  console.log(files)
+  let results = []
+  await Promise.all(files.map(async item => {
+    let buffer = await fs.readFile(item.path)
+    let base64Image = Buffer.from(buffer, 'binary').toString('base64')
+    let fileName = item.name
+    let imgSize = sizeOf(item.path)
+    results.push({
+      base64Image,
+      fileName,
+      width: imgSize.width,
+      height: imgSize.height
+    })
+  }))
+  return results
+}
+
 export {
   imgFromPath,
-  imgFromClipboard
+  imgFromClipboard,
+  imgFromUploader
 }

src/main/utils/pasteTemplate.js

@@ -0,0 +1,9 @@
+export default (style, url) => {
+  const tpl = {
+    'markdown': `![](${url})`,
+    'HTML': `<img src="${url}"/>`,
+    'URL': url,
+    'UBB': `[IMG]${url}[/IMG]`
+  }
+  return tpl[style]
+}

src/main/utils/weiboUpload.js

@@ -20,35 +20,39 @@ function postOptions (formData) {
   }
 }
 
-const weiboUpload = async function (img, type) {
+const weiboUpload = async function (img, type, webContents) {
   try {
+    webContents.send('uploadProgress', 0)
     const formData = {
       username: db.read().get('picBed.weibo.username').value(),
       password: db.read().get('picBed.weibo.password').value()
     }
+    const quality = db.read().get('picBed.weibo.quality').value()
     const options = postOptions(formData)
     const res = await rp(options)
+    webContents.send('uploadProgress', 30)
     if (res.body.retcode === 20000000) {
       for (let i in res.body.data.crossdomainlist) {
         await rp.get(res.body.data.crossdomainlist[i])
       }
+      webContents.send('uploadProgress', 60)
       const imgList = await img2Base64[type](img)
-      let resText = []
       for (let i in imgList) {
         let result = await rp.post(UPLOAD_URL, {
           formData: {
             b64_data: imgList[i].base64Image
           }
         })
-        resText.push(result.replace(/<.*?\/>/, '').replace(/<(\w+).*?>.*?<\/\1>/, ''))
+        result = result.replace(/<.*?\/>/, '').replace(/<(\w+).*?>.*?<\/\1>/, '')
-      }
-      for (let i in imgList) {
-        const resTextJson = JSON.parse(resText[i])
-        imgList[i]['imgUrl'] = `https://ws1.sinaimg.cn/large/${resTextJson.data.pics.pic_1.pid}`
         delete imgList[i].base64Image
+        const resTextJson = JSON.parse(result)
+        imgList[i]['imgUrl'] = `https://ws1.sinaimg.cn/${quality}/${resTextJson.data.pics.pic_1.pid}`
+        imgList[i]['type'] = 'weibo'
       }
+      webContents.send('uploadProgress', 100)
       return imgList
     } else {
+      webContents.send('uploadProgress', -1)
       const notification = new Notification({
         title: '上传失败！',
         body: res.body.msg
@@ -56,7 +60,12 @@ const weiboUpload = async function (img, type) {
       notification.show()
     }
   } catch (err) {
-    console.log('This is error', err, err.name === 'RequestError')
+    webContents.send('uploadProgress', -1)
+    const notification = new Notification({
+      title: '上传失败！',
+      body: '服务端出错，请重试'
+    })
+    notification.show()
     throw new Error(err)
   }
 }

src/renderer/App.vue

@@ -17,4 +17,7 @@
     margin 0
     height 100%
     font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
+  #app
+    overflow-x hidden
+    user-select none
 </style>

src/renderer/components/SettingView/Upload.vue

@@ -1,17 +1,169 @@
 <template>
   <div id="upload-view">
-    upload
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          图片上传
+        </div>
+        <div
+          id="upload-area"
+          :class="{ 'is-dragover': dragover }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
+        >
+          <div id="upload-dragger" @click="openUplodWindow">
+            <i class="el-icon-upload"></i>
+            <div class="upload-dragger__text">
+              将文件拖到此处，或 <span>点击上传</span>
+            </div>
+            <input type="file" id="file-uploader" @change="onChange" multiple>
+          </div>
+        </div>
+        <el-progress 
+          :percentage="progress" 
+          :show-text="false" 
+          class="upload-progress"
+          :class="{ 'show': showProgress }"
+          :status="showError ? 'exception' : ''"
+        ></el-progress>
+        <div class="paste-style">
+          <div class="paste-style__text">
+            链接格式
+          </div>
+          <el-radio-group v-model="pasteStyle" size="mini"
+            @change="handlePasteStyleChange"
+          >
+            <el-radio-button label="markdown">
+              Markdown
+            </el-radio-button>
+            <el-radio-button label="HTML">          </el-radio-button>
+            <el-radio-button label="URL">           </el-radio-button>
+            <el-radio-button label="UBB">            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
+import mixin from '../mixin'
 export default {
   name: 'upload',
+  mixins: [mixin],
   data () {
     return {
-      msg: '123'
+      dragover: false,
+      progress: 0,
+      showProgress: false,
+      showError: false,
+      pasteStyle: ''
+    }
+  },
+  mounted () {
+    this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
+      if (progress !== -1) {
+        this.showProgress = true
+        this.progress = progress
+      } else {
+        this.progress = 100
+        this.showError = true
+      }
+    })
+    this.getPasteStyle()
+  },
+  watch: {
+    progress (val) {
+      if (val === 100) {
+        setTimeout(() => {
+          this.showProgress = false
+          this.showError = false
+        }, 1000)
+        setTimeout(() => {
+          this.progress = 0
+        }, 1200)
+      }
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
+  },
+  methods: {
+    onDrop (e) {
+      this.dragover = false
+      this.ipcSendFiles(e.dataTransfer.files)
+    },
+    openUplodWindow () {
+      document.getElementById('file-uploader').click()
+    },
+    onChange (e) {
+      this.ipcSendFiles(e.target.files)
+      document.getElementById('file-uploader').value = ''
+    },
+    ipcSendFiles (files) {
+      let sendFiles = []
+      Array.from(files).forEach((item, index) => {
+        let obj = {
+          name: item.name,
+          path: item.path
+        }
+        sendFiles.push(obj)
+      })
+      this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
+    },
+    getPasteStyle () {
+      this.pasteStyle = this.$db.get('picBed.pasteStyle').value() || 'markdown'
+    },
+    handlePasteStyleChange (val) {
+      this.$db.set('picBed.pasteStyle', val)
+        .write()
     }
   }
 }
 </script>
 <style lang='stylus'>
+.view-title
+  color #eee
+  font-size 20px
+  text-align center
+  margin 20px auto
+#upload-view
+  #upload-area
+    height 220px
+    border 2px dashed #dddddd
+    border-radius 8px
+    text-align center
+    color #dddddd
+    cursor pointer
+    transition all .2s ease-in-out
+    #upload-dragger
+      height 100%
+    &.is-dragover,
+    &:hover
+      border 2px dashed #A4D8FA
+      background-color rgba(164, 216, 250, 0.3)
+      color #fff
+    i
+      font-size 66px
+      margin 50px 0 16px
+      line-height 66px
+    span
+      color #409EFF
+  #file-uploader
+    display none
+  .upload-progress
+    margin-top 20px
+    opacity 0
+    transition all .2s ease-in-out
+    &.show
+      opacity 1
+    .el-progress-bar__inner
+      transition all .2s ease-in-out
+  .paste-style
+    text-align center
+    margin-top 16px
+    &__text
+      font-size 12px
+      color #eeeeee
+      margin-bottom 4px
+  .el-radio-button:first-child
+    .el-radio-button__inner
+      border-left none
 </style>

src/renderer/components/SettingView/Weibo.vue

@@ -16,7 +16,7 @@
             :rules="{
               required: true, message: '用户名不能为空', trigger: 'blur'
             }">
-            <el-input v-model="form.username" placeholder="用户名"></el-input>
+            <el-input v-model="form.username" placeholder="用户名" @keyup.native.enter="confirm('weiboForm')"></el-input>
           </el-form-item>
           <el-form-item
             label="设定密码"
@@ -24,7 +24,14 @@
             :rules="{
               required: true, message: '密码不能为空', trigger: 'blur'
             }">
-            <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
+            <el-input v-model="form.password" type="password" @keyup.native.enter="confirm('weiboForm')" placeholder="密码"></el-input>
+          </el-form-item>
+          <el-form-item label="* 图片质量">
+            <el-radio-group v-model="quality">
+              <el-radio label="thumbnail">缩略图</el-radio>
+              <el-radio label="mw690">中等尺寸</el-radio>
+              <el-radio label="large">原图</el-radio>
+            </el-radio-group>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="confirm('weiboForm')">确定</el-button>
@@ -35,22 +42,25 @@
   </div>
 </template>
 <script>
+import mixin from '../mixin'
 export default {
   name: 'weibo',
+  mixins: [mixin],
   data () {
     return {
       form: {
         username: '',
         password: ''
-      }
+      },
+      quality: 'large'
     }
   },
   created () {
-    const account = this.$db.get('picBed.weibo').value()
+    const config = this.$db.get('picBed.weibo').value()
-    console.log(account)
+    if (config) {
-    if (account) {
+      this.form.username = config.username
-      this.form.username = account.username
+      this.form.password = config.password
-      this.form.password = account.password
+      this.quality = config.quality || 'large'
     }
   },
   methods: {
@@ -59,13 +69,15 @@ export default {
         if (valid) {
           this.$db.set('picBed.weibo', {
             username: this.form.username,
-            password: this.form.password
+            password: this.form.password,
+            quality: this.quality
           }).write()
-          console.log(this.$db.get('picBed.weibo').value())
+          const successNotification = new window.Notification('设置结果', {
-          this.$message({
+            body: '设置成功'
-            type: 'success',
-            message: '设置成功'
           })
+          successNotification.onclick = () => {
+            return true
+          }
         } else {
           return false
         }
@@ -77,12 +89,12 @@ export default {
 <style lang='stylus'>
 .el-message
   left 60%
+.view-title
+  color #eee
+  font-size 20px
+  text-align center
+  margin 20px auto
 #weibo-view
-  .view-title
-    color #eee
-    font-size 20px
-    text-align center
-    margin 20px auto
   .el-form
     label  
       line-height 22px
@@ -90,5 +102,9 @@ export default {
       color #eee
     .el-button
       width 100%
-      margin-top 10px  
+      border-radius 19px
+    .el-input__inner
+      border-radius 19px
+    .el-radio-group
+      margin-left 25px
 </style>

src/renderer/components/TrayPage.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="tray-page">
+    <!-- <div class="header-arrow"></div> -->
     <div class="content">
       <div class="wait-upload-img" v-if="clipboardFiles.length > 0">
         <div class="list-title">等待上传</div>
@@ -55,6 +56,11 @@
         this.files = this.$db.get('uploaded').slice().reverse().slice(0, 5).value()
       })
     },
+    beforeDestroy () {
+      this.$electron.ipcRenderer.removeAllListeners('dragFiles')
+      this.$electron.ipcRenderer.removeAllListeners('clipboardFiles')
+      this.$electron.ipcRenderer.removeAllListeners('uploadClipboardFiles')
+    },
     methods: {
       getData () {
         this.files = this.$db.get('uploaded').slice().reverse().slice(0, 5).value()
@@ -117,8 +123,6 @@
     position absolute
     top 0px
     width 100%
-    // padding-top 10px
-    // background-color rgba(255,255,255, 1)
   .img-list
     padding 16px 8px
     display flex

src/renderer/components/mixin.js

@@ -0,0 +1,25 @@
+export default {
+  mounted () {
+    this.disableDragEvent()
+  },
+  methods: {
+    disableDragEvent () {
+      window.addEventListener('dragenter', this.disableDrag, false)
+      window.addEventListener('dragover', this.disableDrag)
+      window.addEventListener('drop', this.disableDrag)
+    },
+    disableDrag (e) {
+      const dropzone = document.getElementById('upload-area')
+      if (dropzone === null || !dropzone.contains(e.target)) {
+        e.preventDefault()
+        e.dataTransfer.effectAllowed = 'none'
+        e.dataTransfer.dropEffect = 'none'
+      }
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('dragenter', this.disableDrag, false)
+    window.removeEventListener('dragover', this.disableDrag)
+    window.removeEventListener('drop', this.disableDrag)
+  }
+}