Partly finished: weibo picbed

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>