vueJs 图片上传预览

前端vue代码片段

我用的前端框架是ant design,不同的框架上传方法也许不同,不过大同小异

selfUpload({action, file, onSuccess, onError, onProgress}) {
                // let params = {'file': file}
                var params = new FormData();
                params.append('file', file, file.name);

                upload(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error('上传失败');
                    }
                }).catch(err => {
                    this.$message.error('系统内部错误');
                });

                const base64 = new Promise(resolve => {
                    const fileReader = new FileReader();
                    fileReader.readAsDataURL(file);
                    fileReader.onload = () => {
                        resolve(fileReader.result);
                        //图片url
                        this.previewImage = fileReader.result;

                        //提交用户头像全局变量
                        this.$store.commit('changeAvatar', fileReader.result);
                        this.editable = false;
                    };
                });
            }

后端代码(我有使用安全框架shiro,没事用的话,那就不太清楚了,最好自己debugger看看file对象,一步一步来)

@PostMapping(value = "/upload")
    public CommonResult upload(HttpServletRequest request) {
        //转换成文件上传请求
        ShiroHttpServletRequest shiroHttpServletRequest = (ShiroHttpServletRequest) request;
        MultipartHttpServletRequest multipartRequest = new CommonsMultipartResolver().resolveMultipart((HttpServletRequest) shiroHttpServletRequest);

        //获取文件上传对象
        MultipartFile file = multipartRequest.getFile("file");

        //获取当前对象
        String currentUserToken = (String) SecurityUtils.getSubject().getPrincipal();
        String username = JWTUtil.getUsername(currentUserToken);

        SysUser sysUser = userService.findByName(username);

        String fileName = file.getOriginalFilename();
        //FileUtil 是使用hutool 工具类的   touch  : 创建文件，如果父目录不存在也自动创建
        //resourceConfig.getImageUrl()  本地存储路径(并非图片服务器)
        String path = resourceConfig.getImageUrl() + fileName;
        //我是用的是hutool工具包
        File mkdir = FileUtil.touch(path);
        try {
            //据说性能不错,使用方便,还没验证
            file.transferTo(mkdir);
             sysUser.setAvatarUrl(path);

            userService.saveOrUpdate(sysUser);
            return CommonResult.success("上传成功", fileName);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return CommonResult.error("上传失败");
    }

这样vueJs图片上传预览就完成了