spring boot+iview 前后端分离架构之文件上传的实现（三十一）

分手后的思念是犯贱 2021-12-12 00:57 350阅读 0赞

### spring boot 与 iview 前后端分离架构之文件上传的实现（三十一） ###

*  公众号
 *  文件上传
 *   *  前端改造
     *   *  main.js引入配置的全局变量
         *  编写baseImgUpload图片上传组件
         *   *  baseImgUpload.vue代码如下
             *  index.js代码如下：
         *  配置文件dev.js改造
         *  addUser.vue的改造
         *  updateUser.vue的改造
     *  后端改造
     *   *  aplication-dev.yml增加以下的配置信息
         *  FileController文件上传的实现
     *  nginx的配置
     *  启动项目

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg31】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 文件上传 #

在任何一个系统都会涉及到文件的上传，因此在此处我们就实现一个图片上传的功能，图片上传使用了iview的upload组件，在本章中我们主要对用户模块进行改造，我们在用户模块增加一个用户头像的功能，用户头像我们本身就有进行了字段的设计因此不需要再去改造我们的用户实体了。

## 前端改造 ##

### main.js引入配置的全局变量 ###

/**
     * @description 全局注册应用配置
     */
    Vue.prototype.$runConfig = runConfig;

### 编写baseImgUpload图片上传组件 ###

在components目录底下创建一个upload文件夹，接着在该文件夹底下编写baseImgUpload.vue和index.js文件

#### baseImgUpload.vue代码如下 ####

<template>
      <div>
        <div class="demo-upload-list" v-for="item in uploadList">
          <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </template>
          <template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
          </template>
        </div>
        <Upload
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="uploadSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          :multiple="multiple"
          type="drag"
          :action="uploadAction"
          :data="uploadData"
          :headers="uploadHeader"
          style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
        <Modal  v-model="visible" :fullscreen="fullscreen" :footer-hide="footerHide">
          <img :src="imgName" v-if="visible" style="width: 100%">
        </Modal>
      </div>
    </template>
    <script>
      import userStore from '../../store/module/user';
    
      export default {
        name: 'baseImgUpload',
        props: {
          idImageType: {
            type: String,
            default: 'tmp'
          },
          maxLength: {
            type: Number,
            default: 1
          },
          multiple: {
            type: Boolean,
            default: false
          },
          defaultList: {
            type: Array,
            default: () => {
              return [];
            }
          }
        },
        data() {
          return {
            imgName: '',
            visible: false,
            fullscreen: true,
            footerHide: true,
            uploadList: [],
            uploadAction: this.$runConfig.runConfig.baseUrl + '/file/uploadFile',
            imgUrl: this.$runConfig.runConfig.imgUrl + '/',
            uploadData: {},
            uploadHeader: {'x-access-token': userStore.state.token}
          };
        },
        methods: {
          cleanAll() {// 父组件调用该方法来清空该组件的uploadList的集合
            this.uploadList = [];
          },
          handleView(name) {
            this.imgName = this.imgUrl + name;
            this.visible = true;
          },
          handleRemove(file) {
            this.uploadList.splice(this.uploadList.indexOf(file), 1);
          },
          uploadSuccess(res, file) {
            if (res.code == 200) {
              file.url = this.$runConfig.runConfig.imgUrl + '/' + res.obj.url;
              file.name = res.obj.name;
              this.uploadList.push(file);
            } else {
              this.$Notice.warning({
                title: '文件上传失败',
                desc: '失败原因： ' + res.msg
              });
            }
    
          },
          handleMaxSize(file) {
            this.$Notice.warning({
              title: '超过文件大小限制',
              desc: '文件  ' + file.name + ' 超过2M的大小.'
            });
          },
          handleBeforeUpload() {
            const check = this.uploadList.length < this.maxLength;
            if (!check) {
              this.$Notice.warning({
                title: '最多只能上传' + this.maxLength + '个文件.'
              });
            }
            return check;
          },
          handleFormatError(file) {
            this.$Notice.warning({
              title: '文件格式不正确',
              desc: file.name + '的文件格式不对,请选择文件为jpg或者png的文件进行上传.'
            });
          },
        },
        mounted() {
          this.uploadList = this.$refs.upload.fileList;
          this.uploadData = {
            idImageType: this.idImageType
          };
        },
        watch: {
          uploadList(val) {// 更新父组件的图片的集合数据
            this.$emit('getUploadList', val);
          },
          defaultList(val) {
            this.uploadList = val;
          }
        }
      };
    </script>
    <style>
      .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
      }
    
      .demo-upload-list img {
        width: 100%;
        height: 100%;
      }
    
      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
      }
    
      .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
      }
    
      .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    </style>

#### index.js代码如下： ####

import baseImgUpload from './baseImgUpload.vue';
    export default baseImgUpload;

### 配置文件dev.js改造 ###

export const runDevConfig = {
      baseUrl : 'http://127.0.0.1:8288',
      imgUrl : 'http://127.0.0.1:80/merJoinResource'
    };

### addUser.vue的改造 ###

<template>
      <Modal v-model="show" title="新增用户" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="userForm" :model="userForm" :rules="userFormRule">
          <FormItem label="用户账号" prop="loginAccount">
            <Input type="text" :maxlength=50 v-model="userForm.loginAccount"
                   placeholder="请输入用户账号"/>
          </FormItem>
          <FormItem label="用户名称" prop="nickName">
            <Input type="text" :maxlength=50 v-model="userForm.nickName" placeholder="请输入用户名称"/>
          </FormItem>
          <FormItem label="用户角色" prop="roles">
            <Select v-model="userForm.roles" multiple placeholder="请选择用户角色">
              <Option v-for="item in roleDate" :value="item.roleId" :key="item.roleId">{
       { item.roleName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="所属组织" prop="orgIds"
                    placeholder="请选择所属组织">
            <Cascader v-model="userForm.orgIds" :data="orgData" change-on-select filterable></Cascader>
          </FormItem>
          <FormItem label="联系地址" prop="pca">
            <al-cascader v-model="userForm.pca" level="2" @on-change="pcaChange"></al-cascader>
          </FormItem>
          <FormItem label="详细地址" prop="address">
            <Input type="textarea" :rows="4" :maxlength=100 v-model="userForm.address" placeholder="请输入详细地址"/>
          </FormItem>
          <FormItem label="头像地址" prop="headImg">
            <Row>
              <Col span="24">
                <baseImgUpload ref="headImg" :maxLength="1" idImageType="user"
                               @getUploadList="getHeadImgUploadList"></baseImgUpload>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
      import {getOrgCascader} from "../../../api/sys/org/org.api"
      import {
        loadAllRole,
        createUser,
        checkLoginAccount
      } from "../../../api/sys/user/user.api"
    
      import baseImgUpload from '../../../components/upload';
    
      export default {
        name: "addOrg",
        components: {
          baseImgUpload
        },
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            userForm: {
              loginAccount: '',
              nickName: '',
              orgIds: [],
              roles: [],
              headImg: '',
              province: '',
              provinceName: '',
              city: '',
              cityName: '',
              area: '',
              areaName: '',
              address: '',
              pca: []
            },
            userFormRule: {
                loginAccount: [
                  {required: true, message: '请输入用户账号', trigger: 'blur'},
                  {type: 'string', max: 50, message: '请输入不超过50的用户账号', trigger: 'blur'},
                  {
                    validator: this.checkLoginAccount({
                      response: 'exist'
                    }), trigger: 'blur'
                  }
                ],
                nickName: [
                  {required: true, message: '请输入用户名称', trigger: 'blur'},
                  {type: 'string', max: 50, message: '请输入不超过50的用户名称', trigger: 'blur'}
                ],
                pca: [
                  {required: true, message: '请选择联系地址', trigger: 'change', type: "array"}
                ],
                address:[
                  {required: true, message: '请输入详细地址', trigger: 'blur'}
                ],
                roles: [
                  {required: true, message: '请选择用户角色', trigger: 'change', type: "array"}
                ],
                orgIds: [
                  {required: true, message: '请选择用户所属组织', trigger: 'change', type: "array"}
                ]
            },
            orgData: [],
            roleDate: []
          }
        },
        methods: {
          getHeadImgUploadList(val) {
            if (val.length > 0) {
              this.userForm.headImg = val[0].name;
            } else {
              this.userForm.headImg = '';
            }
          },
          ok() {
            this.$refs['userForm'].validate((valid) => {
              if (valid) {
                createUser({
                  loginAccount: this.userForm.loginAccount,
                  nickName: this.userForm.nickName,
                  headImg: this.userForm.headImg,
                  orgIds: this.userForm.orgIds.join(','),
                  roles: this.userForm.roles.join(','),
                  province: this.userForm.province,
                  provinceName: this.userForm.provinceName,
                  city: this.userForm.city,
                  cityName: this.userForm.cityName,
                  area: this.userForm.area,
                  areaName: this.userForm.areaName,
                  address: this.userForm.address
                }).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('handleSearch');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证不通过');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          checkLoginAccount() {
            let _this = this;
            return function (rule, value, callback) {
              let loginAccount = value;
              checkLoginAccount({loginAccount: loginAccount}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('账号已经存在'));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          },
          pcaChange(data) {
            this.userForm.province = data[0].code
            this.userForm.provinceName = data[0].name
            this.userForm.city = data[1].code
            this.userForm.cityName = data[1].name
            this.userForm.area = data[2].code
            this.userForm.areaName = data[2].name
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['userForm'].resetFields();
              this.$refs['headImg'].cleanAll();
              getOrgCascader({}).then(res => {
                if (res.code == 200) {
                  this.orgData = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
              loadAllRole({}).then(res => {
                if (res.code == 200) {
                  this.roleDate = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

### updateUser.vue的改造 ###

<template>
      <Modal v-model="show" title="修改用户" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="userForm" :model="userForm" :rules="userFormRule">
          <FormItem label="用户账号">
            <Input type="text" :maxlength=50 v-model="userForm.loginAccount" disabled/>
          </FormItem>
          <FormItem label="用户名称" prop="nickName">
            <Input type="text" :maxlength=50 v-model="userForm.nickName" placeholder="请输入用户名称"/>
          </FormItem>
          <FormItem label="用户角色" prop="roles">
            <Select v-model="userForm.roles" multiple placeholder="请选择用户角色">
              <Option v-for="item in roleDate" :value="item.roleId" :key="item.roleId">{
       { item.roleName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="所属组织" prop="orgIds" placeholder="请选择所属组织">
            <Cascader v-model="userForm.orgIds" :data="orgData" change-on-select filterable></Cascader>
          </FormItem>
          <FormItem label="联系地址" prop="pca">
            <al-cascader v-model="userForm.pca" level="2" @on-change="pcaChange"></al-cascader>
          </FormItem>
          <FormItem label="详细地址" prop="address">
            <Input type="textarea" :rows="4" :maxlength=100 v-model="userForm.address" placeholder="请输入详细地址"/>
          </FormItem>
          <FormItem label="头像地址" prop="headImg">
            <Row>
              <Col span="24">
                <baseImgUpload ref="headImg" :maxLength="1" idImageType="user" :defaultList="defaultList"
                               @getUploadList="getHeadImgUploadList"></baseImgUpload>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
      import {getOrgCascader} from "../../../api/sys/org/org.api"
      import {
        loadAllRole,
        getUserByUserId,
        updateUser
      } from "../../../api/sys/user/user.api"
      import baseImgUpload from '../../../components/upload';
    
      export default {
        name: "updateOrg",
        components: {
          baseImgUpload
        },
        props: {
          value: {
            type: Boolean,
            default: false
          },
          userId: {
            type: String
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            userForm: {
              userId: '',
              loginAccount: '',
              nickName: '',
              orgIds: [],
              roles: [],
              headImg: '',
              province: '',
              provinceName: '',
              city: '',
              cityName: '',
              area: '',
              areaName: '',
              address: '',
              pca: []
            },
            userFormRule: {
              nickName: [
                {required: true, message: '请输入用户名称', trigger: 'blur'},
                {type: 'string', max: 50, message: '请输入不超过50的用户名称', trigger: 'blur'}
              ],
              pca: [
                {required: true, message: '请选择联系地址', trigger: 'change', type: "array"}
              ],
              address:[
                {required: true, message: '请输入详细地址', trigger: 'blur'}
              ],
              roles: [
                {required: true, message: '请选择用户角色', trigger: 'change', type: "array"}
              ],
              orgIds: [
                {required: true, message: '请选择用户所属组织', trigger: 'change', type: "array"}
              ]
            },
            orgData: [],
            roleDate: [],
            defaultList: []
          }
        },
        methods: {
          getHeadImgUploadList(val) {
            if (val.length > 0) {
              this.userForm.headImg = val[0].name;
            } else {
              this.userForm.headImg = '';
            }
          },
          ok() {
            this.$refs['userForm'].validate((valid) => {
              if (valid) {
                updateUser({
                  userId: this.userForm.userId,
                  nickName: this.userForm.nickName,
                  headImg: this.userForm.headImg,
                  orgIds: this.userForm.orgIds.join(','),
                  roles: this.userForm.roles.join(','),
                  province: this.userForm.province,
                  provinceName: this.userForm.provinceName,
                  city: this.userForm.city,
                  cityName: this.userForm.cityName,
                  area: this.userForm.area,
                  areaName: this.userForm.areaName,
                  address: this.userForm.address
                }).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('handleSearch');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证不通过');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          closeModal(val) {
            this.$emit('input', val);
          },
          pcaChange(data) {
            this.userForm.province = data[0].code
            this.userForm.provinceName = data[0].name
            this.userForm.city = data[1].code
            this.userForm.cityName = data[1].name
            this.userForm.area = data[2].code
            this.userForm.areaName = data[2].name
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['userForm'].resetFields();
              this.$refs['headImg'].cleanAll();
              getOrgCascader({}).then(res => {
                if (res.code == 200) {
                  this.orgData = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
              loadAllRole({}).then(res => {
                if (res.code == 200) {
                  this.roleDate = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
              getUserByUserId({userId: this.userId}).then(res => {
                if (res.code == 200) {
                  res.obj.pca = [res.obj.province,res.obj.city,res.obj.area];
                  this.userForm = res.obj;
                  if(this.userForm.headImg!=''){
                    this.defaultList = [
                      {
                        name: this.userForm.headImg,
                        url: this.$runConfig.runConfig.imgUrl + '/' + this.userForm.headImg,
                        status: 'finished',
                        percentage: 100
                      }
                    ];
                  }
                } else {
                  this.$Message.error(res.msg);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

## 后端改造 ##

### aplication-dev.yml增加以下的配置信息 ###

# 文件上传的地址
    file:
      upload:
        path: D:/static/merJoinResource/

### FileController文件上传的实现 ###

package com.github.bg.admin.core.controller;
    
    import com.github.bg.admin.core.constant.SystemStaticConst;
    import com.github.bg.admin.core.entity.ReturnInfo;
    import com.github.bg.admin.core.util.UuidUtils;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.http.MediaType;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * @author linzf
     * @since 2019-06-11
     * 类描述：实现文件上传
     */
    @RestController
    @RequestMapping(value = "/file")
    public class FileController {
    
        private static final Logger logger = LoggerFactory.getLogger(FileController.class);
    
        @Value("${file.upload.path}")
        private String uploadPath;
    
        /**
         * 功能描述：实现文件上传
         * @param file 文件的file
         * @param idImageType 文件类型
         * @return
         */
        @PostMapping(value = "uploadFile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
        public ReturnInfo uploadFile(@RequestParam("file") MultipartFile file,
                                     @RequestParam("idImageType") String idImageType) {
            if (file.isEmpty()) {
                return new ReturnInfo(SystemStaticConst.FAIL, "上传文件不能为空！");
            }
            if (idImageType == null || "".equals(idImageType)) {
                idImageType = "tmp";
            }
            // 获取文件名
            String fileName = file.getOriginalFilename();
            logger.info("上传的文件名为：" + fileName);
            // 获取文件的后缀名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            logger.info("上传的后缀名为：" + suffixName);
            // 文件上传后的路径
            String filePath = uploadPath;
            if (filePath == null || "".equalsIgnoreCase(filePath)) {
                filePath = "E://test//";
            }
            filePath = filePath + idImageType + "//";
            // 解决中文问题，liunx下中文路径，图片显示问题
            fileName = UuidUtils.getUUID() + suffixName;
            File dest = new File(filePath + fileName);
            // 检测是否存在目录
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
            try {
                file.transferTo(dest);
                Map<String, Object> entity = new HashMap<>(2);
                entity.put("name", idImageType + "/" + fileName);
                entity.put("url", idImageType + "/" + fileName);
                return new ReturnInfo(SystemStaticConst.SUCCESS, "上传文件成功！", entity);
            } catch (IllegalStateException e) {
                e.printStackTrace();
                return new ReturnInfo(SystemStaticConst.FAIL, "上传文件失败！请联系管理员！");
            } catch (IOException e) {
                e.printStackTrace();
                return new ReturnInfo(SystemStaticConst.FAIL, "上传文件失败！请联系管理员！");
            }
        }
    
    }

## nginx的配置 ##

通过dev.js配置的图片的文件的地址是：http://127.0.0.1:80/merJoinResource，后端配置的保存图片文件的地址是：D:/static/merJoinResource/，因此我们需要配置一个nginx来实现图片的读取，打开nginx的conf目录底下的nginx.conf增加以下配置：

server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location /merJoinResource {
                root   D:\static;
            }
    }

## 启动项目 ##

最后我们启动我们的项目，同时启动nginx，然后访问我们的用户组织模块，我们会看到我们可以正常的上传用户的图片，同时可以显示出来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
上一篇文章地址：[spring boot+iview 前后端分离架构之用户管理的实现（三十）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之登陆密码RSA加密（三十二）][spring boot_iview _RSA]

[20191218155125364.jpg]: /images/20211211/5d7d1e48820d4b93a17656aa8e984594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211211/ae39343afbdb499aa381238530075d64.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/95193315
[spring boot_iview _RSA]: https://blog.csdn.net/linzhefeng89/article/details/95254619