个人中心上传照片、签名

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysProfileController.java

@@ -45,7 +45,7 @@ public class SysProfileController extends BaseController
     public AjaxResult profile()
     {
         LoginUser loginUser = getLoginUser();
-        SysUser user = loginUser.getUser();
+        SysUser user = userService.selectUserById(loginUser.getUserId());
         AjaxResult ajax = AjaxResult.success(user);
         ajax.put("roleGroup", userService.selectUserRoleGroup(loginUser.getUsername()));
         ajax.put("postGroup", userService.selectUserPostGroup(loginUser.getUsername()));

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysUserController.java

@@ -6,9 +6,7 @@ import java.util.stream.Collectors;
 import javax.servlet.http.HttpServletResponse;
 
 import com.ruoyi.common.config.RuoYiConfig;
-import com.ruoyi.common.utils.DateUtils;
 import com.ruoyi.common.utils.file.FileUploadUtils;
-import com.ruoyi.common.utils.uuid.IdUtils;
 import org.apache.commons.lang3.ArrayUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.access.prepost.PreAuthorize;
@@ -52,21 +50,6 @@ public class SysUserController extends BaseController
     @Autowired
     private ISysPostService postService;
 
-//    /**
-//     * 签名图上传
-//     */
-//    @Log(title = "签名图上传", businessType = BusinessType.UPDATE)
-//    @PostMapping("/uploadFile")
-//    public AjaxResult uploadFile(@RequestParam("file") MultipartFile file) throws IOException
-//    {
-//        if (!file.isEmpty())
-//        {
-//            String avatar = FileUploadUtils.uploadAndChangeName(RuoYiConfig.getFilePath("/userSign"), file , DateUtils.dateTime() + "/" + IdUtils.fastUUID().substring(5) + "/" +"sign.png");
-//            return AjaxResult.success(avatar);
-//        }
-//        return AjaxResult.error("上传图片异常，请联系管理员");
-//    }
-
     /**
      * 签名图上传
      */
@@ -78,7 +61,7 @@ public class SysUserController extends BaseController
             String url = FileUploadUtils.upload(RuoYiConfig.getFilePath("/"+ pType), file);
             SysUser user = userService.selectUserById(Long.parseLong(pId));
             user.setSignUrl(url);
-            userService.updateUser(user);
+            userService.updateUserBasicInfo(user);
             return AjaxResult.success();
         }
         return AjaxResult.error("上传失败，请联系管理员");
@@ -96,7 +79,7 @@ public class SysUserController extends BaseController
             SysUser user = userService.selectUserById(Long.parseLong(pId));
             user.setPhoto(url);
             user.setAvatar(url);
-            userService.updateUser(user);
+            userService.updateUserBasicInfo(user);
             return AjaxResult.success();
         }
         return AjaxResult.error("上传失败，请联系管理员");

ruoyi-system/src/main/java/com/ruoyi/system/service/ISysUserService.java

@@ -127,6 +127,7 @@ public interface ISysUserService
      * @return 结果
      */
     public int updateUser(SysUser user);
+    public int updateUserBasicInfo(SysUser user);
 
     /**
      * 用户授权角色

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java

@@ -298,6 +298,10 @@ public class SysUserServiceImpl implements ISysUserService
         insertUserPost(user);
         return userMapper.updateUser(user);
     }
+    public int updateUserBasicInfo(SysUser user)
+    {
+        return userMapper.updateUser(user);
+    }
 
     /**
      * 用户授权角色

ruoyi-ui/src/views/system/user/profile/index.vue

@@ -82,6 +82,12 @@ export default {
     getUser() {
       getUserProfile().then(response => {
         this.user = response.data;
+        if (response.data.photo) {
+          this.user.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+        }
+        if (response.data.signUrl) {
+          this.user.signUrl = process.env.VUE_APP_BASE_API + response.data.signUrl;
+        }
         this.roleGroup = response.roleGroup;
         this.postGroup = response.postGroup;
       });

ruoyi-ui/src/views/system/user/profile/userInfo.vue

@@ -15,6 +15,43 @@
         <el-radio label="1">女</el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-row>
+      <el-col :span="6">
+        <el-form-item label="照片" prop="photo" v-if="user.userId">
+          <el-upload
+            ref="photo"
+            :headers="photo.headers"
+            :action="photo.url + '?pType=' + photo.pType + '&pId=' + user.userId"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            list-type="picture-card">
+            <img v-if="user.photoUrl" :src="user.photoUrl" class="avatar">
+            <i v-else class="el-icon-plus "></i>
+          </el-upload>
+          <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="签名" prop="signUrl" v-if="user.userId">
+          <el-upload
+            ref="sign"
+            list-type="picture-card"
+            :action="signPic.url + '?pType=' + signPic.pType + '&pId=' + user.userId"
+            :headers="signPic.headers"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+          >
+            <img v-if="user.signUrl" :src="user.signUrl" class="avatar">
+            <i v-else class="el-icon-plus "></i>
+          </el-upload>
+          <el-dialog  :close-on-click-modal="false" v-dialogDrag :visible.sync="dialogVisible" append-to-body>
+            <img width="100%" :src="dialogSignUrl" alt="">
+          </el-dialog>
+        </el-form-item>
+      </el-col>
+    </el-row>
     <el-form-item>
       <el-button type="primary" size="mini" @click="submit">保存</el-button>
       <el-button type="danger" size="mini" @click="close">关闭</el-button>
@@ -23,7 +60,8 @@
 </template>
 
 <script>
-import { updateUserProfile } from "@/api/system/user";
+import { getUser, updateUserProfile } from "@/api/system/user";
+import { getToken } from "@/utils/auth";
 
 export default {
   props: {
@@ -33,6 +71,35 @@ export default {
   },
   data() {
     return {
+      dialogSignUrl: '',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      signPic: {
+        file: "",
+        // 报告附件上传位置编号
+        ids: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/uploadSignUrl",
+        pType: 'userSignUrl',
+        pId: null
+      },
+      signUrl: '',
+      // 人员照片参数
+      photo: {
+        file: "",
+        // 报告附件上传位置编号
+        ids: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/uploadPhoto",
+        pType: 'userPhoto',
+        pId: null
+      },
+      //照片回显
+      photoUrl: '',
       // 表单校验
       rules: {
         nickName: [
@@ -58,6 +125,35 @@ export default {
     };
   },
   methods: {
+    handleAvatarProgress(event, file, fileList) {
+      this.photo.file = file;
+      this.photoUrl = file;
+    },
+    handleAvatarSuccess(res, file, fileList) {
+      // this.photoUrl =  URL.createObjectURL(file.raw);
+      getUser(this.user.userId).then(response => {
+        if (response.data.photo) {
+          this.user.photoUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+          this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.photo;
+        }
+        if (response.data.signUrl) {
+          this.user.signUrl = process.env.VUE_APP_BASE_API + response.data.signUrl;
+          this.dialogSignUrl = process.env.VUE_APP_BASE_API + response.data.signUrl;
+        }
+      });
+      this.$alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true });
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG、png 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+      }
+      return isJPG && isLt2M;
+    },
     submit() {
       this.$refs["form"].validate(valid => {
         if (valid) {
@@ -73,3 +169,28 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 120px;
+    height: 140px;
+  }
+</style>