签名上传

app/controller/profile_controller.js

@@ -8,9 +8,12 @@
  * @version
  */
 
+const moment = require('moment');
 const profileMenu = require('../../config/menu').profileMenu;
 const smsTypeConst = require('../const/sms_type');
 const qr = require('qr-image');
+const path = require('path');
+const sendToWormhole = require('stream-wormhole');
 
 module.exports = app => {
 
@@ -302,6 +305,38 @@ module.exports = app => {
         }
 
         /**
+         * 上传签名图
+         *
+         * @param {object} ctx - egg全局变量
+         * @return {void}
+         */
+        async signUpload(ctx) {
+            const responseData = {
+                err: 0, msg: '', data: null,
+            };
+            try {
+                const stream = await ctx.getFileStream();
+                const create_time = Date.parse(new Date()) / 1000;
+                const fileInfo = path.parse(stream.filename);
+                const dirName = 'public/upload/sign';
+                const fileName = moment().format('YYYYMMDD') + '_sign_' + create_time + fileInfo.ext;
+                await ctx.helper.saveStreamFile(stream, path.join(this.app.baseDir, 'app', dirName, fileName));
+                await sendToWormhole(stream);
+                const result = await ctx.service.projectAccount.update({ sign_path: fileName }, { id: ctx.session.sessionUser.accountId });
+                if (result) {
+                    responseData.data = { sign_path: fileName };
+                } else {
+                    throw '添加数据库失败';
+                }
+            } catch (err) {
+                this.log(err);
+                responseData.err = 1;
+                responseData.msg = err;
+            }
+            ctx.body = responseData;
+        }
+
+        /**
          * 账号安全
          *
          * @param {object} ctx - egg全局变量

app/public/js/profile.js

@@ -117,6 +117,37 @@ $(document).ready(function() {
                 $('#sign-show').remove();
                 toast('移除成功', 'success');
             })
+        });
+
+        // 签名模式切换
+        $('.sign-type').click(function () {
+            if (parseInt($(this).val()) === 1) {
+                $('#show-upload').hide();
+                $('#show-qrcode').show();
+            } else {
+                $('#show-upload').show();
+                $('#show-qrcode').hide();
+            }
+        });
+
+        // 上传签名
+        $('#sign-upload').change(function () {
+            const file = this.files[0];
+            const ext = file.name.toLowerCase().split('.').splice(-1)[0];
+            const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
+            if (!imgStr.test(ext)) {
+                toast('请上传正确的图片格式文件','error');
+                return
+            }
+            if ($(this).val()) {
+                const formData = new FormData();
+                formData.append('file', this.files[0]);
+                postDataWithFile('/profile/sign/upload', formData, function (result) {
+                    const html = '<img src="/public/upload/sign/'+ result.sign_path +'" width="90">';
+                    $('#sign-show').html(html);
+                    $('#sign-upload').val('');
+                });
+            }
         })
     } catch (error) {
         console.log(error);

app/router.js

@@ -240,6 +240,7 @@ module.exports = app => {
     app.post('/profile/sms/type', sessionAuth, 'profileController.smsType');
     app.get('/profile/sign', sessionAuth, 'profileController.sign');
     app.post('/profile/sign/delete', sessionAuth, 'profileController.signDelete');
+    app.post('/profile/sign/upload', sessionAuth, 'profileController.signUpload');
     app.get('/profile/safe', sessionAuth, 'profileController.safe');
     app.post('/profile/save', sessionAuth, 'profileController.saveBase');
     app.post('/profile/password', sessionAuth, 'profileController.modifyPassword');

app/view/profile/sign.ejs

@@ -12,22 +12,22 @@
                 <div class="col-5 my-3">
                     <!--账号资料-->
                     <form>
-                        <!--<div class="form-group">-->
-                            <!--<div class="form-check form-check-inline">-->
-                                <!--<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">-->
-                                <!--<label class="form-check-label" for="inlineRadio2">在线手写签名图</label>-->
-                            <!--</div>-->
-                            <!--<div class="form-check form-check-inline">-->
-                                <!--<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">-->
-                                <!--<label class="form-check-label" for="inlineRadio1">上传签名图</label>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                        <!--<div class="form-group">-->
-                            <!--<label>上传签名图</label>-->
-                            <!--<input type="file" class="form-control-file" id="exampleFormControlFile1">-->
-                            <!--<small class="form-text text-danger">图片大小为600x300，格式PNG透明背景。</small>-->
-                        <!--</div>-->
                         <div class="form-group">
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input sign-type" type="radio" name="sign" id="sign-type-1" value="1" checked>
+                                <label class="form-check-label" for="sign-type-1">在线手写签名图</label>
+                            </div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input sign-type" type="radio" name="sign" id="sign-type-2" value="2">
+                                <label class="form-check-label" for="sign-type-2">上传签名图</label>
+                            </div>
+                        </div>
+                        <div class="form-group" id="show-upload" style="display: none">
+                            <label>上传签名图</label>
+                            <input type="file" class="form-control-file" id="sign-upload">
+                            <small class="form-text text-danger">图片大小为600x300，格式PNG透明背景。</small>
+                        </div>
+                        <div class="form-group" id="show-qrcode">
                             <label>在线手写签名</label>
                             <div><img src="/profile/qrCode" width="150"></div>
                             <small class="form-text text-danger">微信扫码使用在线手写程序</small>
@@ -38,11 +38,11 @@
                             <div>
                                 <div class="position-relative">
                                     <img src="/public/images/baobiao3.png">
-                                    <% if (accountData.sign_path !== '') { %>
                                     <div class="position-absolute fixed-top" id="sign-show" style="left:290px;top:320px">
-                                        <img src="/public/upload/sign/<%= accountData.sign_path %>" width="90">
+                                        <% if (accountData.sign_path !== '') { %>
+                                            <img src="/public/upload/sign/<%= accountData.sign_path %>" width="90">
+                                        <% } %>
                                     </div>
-                                    <% } %>
                                 </div>
                             </div>
                         </div>