8.ssm和vue实现文件上传

预期效果

前端核心代码

由于咱们是上传 logo 图片，所以我们可以先在前端校验一下文件格式必须是图片格式，这样用户体验就会好些。

 <el-upload
              class="upload-demo"
              :before-upload="beforeUpload"
              name="logo"
              accept="image/*"
              :show-file-list="false"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :action="baseURL+'/appInfo/upLogo/'+scope.row.id"
              :limit="1">
            <el-button ref="fileInput" size="small" type="warning">上传logo</el-button>
          </el-upload>


          

uploadSuccess(response, file, fileList){

        console.log(response);
        console.log(file);
        console.log(fileList);

        //清空fileList
        this.fileList=[]

        this.getPage()

      },

 beforeUpload(file) {
        const isImage = file.type.startsWith('image/');
        if (!isImage) {
          this.$message.error('只能上传图片文件!');
        }
        return isImage;
      },

    <el-table-column
          label="logo图">

        <template slot-scope="scope">
          <img :src="baseURL+'/'+scope.row.logopicpath"  alt="" style="height: 50px;width: 50px">
        </template>
      </el-table-column>

备注：baseURL 是：process.env.VUE_APP_BASE_API

而这个是谁？ 读取.env.development 这个文件中的VUE_APP_BASE_API 的值：/dev-api

后端核心代码

全局异常处理

@ControllerAdvice
public class GlobalController {

    @ExceptionHandler(Exception.class)
    @ResponseBody
    public ResultVo exception(Exception e){
        return ResultVo.error(e.getMessage());
    }
}

文件上传

public void upLogo(Long id, MultipartFile file) {

        if (file!=null && !file.isEmpty()) {
            //文件上传到哪里？？？
            String realPath="D:/upload/logo/";
            File savePath= new File(realPath);
            if(!savePath.exists()){
                savePath.mkdirs();
            }
            String originalFilename = file.getOriginalFilename();

            //获取文件后缀

            String extension = FilenameUtils.getExtension(originalFilename);
            if (file.getSize()>1024*1024) {
                throw  new RuntimeException("文件不能超过1M");
            } else if (
                    extension.equalsIgnoreCase("jpg")||
                    extension.equalsIgnoreCase("jpeg")||
                    extension.equalsIgnoreCase("png")||
                    extension.equalsIgnoreCase("gif")
            ) {
                //正常上传
                String fileName= UUID.randomUUID().toString().replace("-","");
                File saveFile= new File(realPath+fileName+"."+extension);
                try {
                    AppInfo appInfo = appInfoMapper.selectByPrimaryKey(id);

                    if(appInfo.getLogopicpath()!= null){
                        File logo=new File("D:/upload/logo/"+appInfo.getLogopicpath());
                        if(logo.exists()){
                            logo.delete();
                        }
                    }
                    file.transferTo(saveFile);
                    //保存 上传成功后的文件名到数据库
                    appInfo.setLogopicpath(fileName+"."+extension);

                    appInfoMapper.updateByPrimaryKeySelective(appInfo);

                } catch (IOException e) {
                    throw new RuntimeException("文件上传出现异常");
                }


            }else{
                throw  new RuntimeException("文件格式不正确");
            }


        }else{
            throw  new RuntimeException("文件必填");
        }

    }

注意 springmvc 中的文件解析器

    <!--文件解析器-->
    <bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">
        <property name="maxUploadSize" value="-1"/>

        <property name="defaultEncoding" value="utf-8"/>
    </bean>