Vue+Element+Springboot图片上传的实现示例

最近没事刚好联系下vue+springboot前段后分离的项目、用上了图片上传功能、记录一下。

前端待提交的表单部分代码

<el-form-item label="封面图片">
                <el-upload v-model="dataForm.title"
                        class="avatar-uploader"
                        :limit="1"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        multiple
                        :http-request="uploadFile"
                        :on-remove="handleRemove"
                        :on-change='changeUpload'
                        :file-list="images">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

el-upload里面的元素解释:

  • on-preview:点击文件列表中已上传的文件时的事件
  • on-remove:删除文件时候调用的方法
  • on-change:文件状态改变时的事件,添加文件、上传成功和上传失败时都会被调用
  • file-list:上传的文件列表或者默认回显的数据展示渲染

retrun和data

return {
                images: [{name: 'food.jpg', url: 'https://img-blog.csdnimg.cn/20210329194832973.png'}],
                imageUrl: '',
                fileList: [],  // 文件上传数据(多文件合一)
                dialogImageUrl: '',
                dialogVisible: false,
                options: [],
                content: '',
                editorOption: {},
                visible: false,
                dataForm: {
                    id: 0,
                    title: '',
                    content: '',
                    bz: ''
                },
                tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
            }

预览图片和上传图片以及删除图片

changeUpload: function(file, fileList) {//预览图片
                this.fileList = fileList;
            },
            uploadFile(file){

            },
            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },    

这里我是用fomrData对象进行提交的、因为只需要上传一张单张封面图片、还有添加其他的一些表单内容进去

// 表单提交
            dataFormSubmit () {
                const form = new FormData()// FormData 对象
                form.append('file', this.fileList);
                form.append('title', this.dataForm.title);
                form.append('content', this.$refs.text.value);
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'save' : 'update'}`),
                            method: 'post',
                            data: form
                        }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refreshDataList')
                                    }
                                })
                            } else {
                                this.$message.error(data.msg)
                            }
                        })
                    }
                })
            }

后台的话通过HttpServletRequest request--WebUtils

.getNativeRequest(request, MultipartHttpServletRequest.class)来获取文件请求并解析文件到服务器或本地

/**
 * @author lyy
 * 保存  PC-后台上传文件
 */
@RequestMapping(value = "sys/file/save", method = {RequestMethod.POST, RequestMethod.GET})
@Transactional
public R save(HttpServletRequest request) {
    String classify = request.getParameter("classify");
    MultipartHttpServletRequest multipartRequest = WebUtils
            .getNativeRequest(request, MultipartHttpServletRequest.class);
    String fileName = "";
    if (multipartRequest != null) {
        Iterator<String> names = multipartRequest.getFileNames();
        while (names.hasNext()) {
            List<MultipartFile> files = multipartRequest.getFiles(names.next());
            if (files != null && files.size() > 0) {
                for (MultipartFile file : files) {
                    fileName = file.getOriginalFilename();
                    String SUFFIX = FileUtil.getFileExt(fileName);
                    File uFile = new File();
                    uFile.setFileName(fileName);
                    uFile.setClassify(classify);
                    uFile.setCreateTime(new Date());
                    uFile.setFileType(SUFFIX);
                    String uuid = FileUtil.uuid();
                    try {
                        uFile.setPath(uploadFile(uuid,file) +uuid+"."+SUFFIX);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                     fileService.save(uFile);
                }
            }
        }
    }
    return R.ok();
}

上传文件到本地的静态方法

/**
     * 上传文件
     *@author lyy
     * @param file
     * @return
     * @throws IOException
     * @throws IllegalStateException
     */
    public static String uploadFile(String uuid, MultipartFile file) throws IllegalStateException, IOException {
        String defaultUrl = MyFileConfig.getFilePath();
        String Directory = java.io.File.separator ;
        String realUrl = defaultUrl + Directory;
        java.io.File realFile = new  java.io.File(realUrl);
        if (!realFile.exists() && !realFile.isDirectory()) {
            realFile.mkdirs();
        }
        String fullFile = realUrl + uuid + "."+FileUtil.getFileExt(file.getOriginalFilename());
        file.transferTo(new java.io. File(fullFile));
        String relativePlanUrl = Directory;
        return relativePlanUrl.replaceAll("\\", "/");
    }

 到此这篇关于Vue+Element+Springboot图片上传的实现示例的文章就介绍到这了,更多相关Vue+Element+Springboot图片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    在前端项目中,附件上传是很常用的功能,几乎所有的app相关项目中都会使用到,一般在选择使用某个前端UI框架时,可以查找其内封装好的图片上传组件,但某些情况下可能并不适用于自身的项目需求,本文中实现的附件上传区域支持超多类型附件分类型上传,并且可根据特定条件具体展示某些类型的附件上传,本文中是直接摘自具体的页面,后面会抽时间单独封装出来一个附件上传的组件. 一.Vue页面内附件展示区域代码 <div class="retuinfo"> <div class="

  • Vue+SSM实现图片上传预览效果

    现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上. 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库是MySQL 实现思路: 前端界面:当用户点击上传文件按钮,选中待上传图片并点击确认后,这时应该把图片数据传给后台.当后台经过处理后返回结果,前端在根据响应结果做后续工作. 后端:后台拿到前端传过来的数据时,将图片文件存到固定的文件夹下(这个问题是我思考了很久的,我认为应该存在服务器下,原先我是存在本地文件夹下,然后

  • Vue使用axios图片上传遇到的问题

    FormData是个什么鬼? 经过多方搜索调查了解,这个神奇的东西是XMLHttpRequest Level 2 新增的一个对象,于2008年2月提出,可以利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件,可以把所有表单元素的name与value组成一个queryString,提交到后台. 划重点: 可以把所有表单元素的name与value组成一个queryString,提交到后台.这不就是后端所谓的转换数据格式,按格式提交呗,前后端分离肯定是异步提交,这个就可以很好的去解决

  • vue.js云存储实现图片上传功能

    前言 提示:以下是本篇文章正文内容,下面案例可供参考 一.对象存储 示对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性.低成本.可靠安全等优点.通过控制台.API.SDK 和工具等多样化方式,用户可简单.快速地接入 COS,进行多格式文件的上传.下载和管理,实现海量数据存储和管理. 二.配置腾讯云Cos 1.引入库 代码如下(示例): 目标 : 配置一个腾讯云cos 由于上课的开发的特殊性,我们不希望把所有的图片都上传到我们

  • vue+axios实现图片上传识别人脸的示例代码

    目录 Axios请求 Qs处理数据分析 Vant上传文件格式 完整代码 本文主要介绍了vue+axios实现图片上传识别人脸的示例代码,分享给大家,具体如下: 先看最终效果: 这里采用的是vant的文件上传组件,通过上传图片后端识别图片里的人脸,返回到前端,获取该人脸匹配的工号或学号.以便后续其他系统使用,比如上传成功了一个人脸照片识别成功,可以通过人脸开启会议室的门禁.目前只是做了一个人脸上传的效果. Axios请求 使用axios请求数据,method:post时,data默认的传参数据类型

  • Vue+Element+Springboot图片上传的实现示例

    最近没事刚好联系下vue+springboot前段后分离的项目.用上了图片上传功能.记录一下. 前端待提交的表单部分代码 <el-form-item label="封面图片"> <el-upload v-model="dataForm.title" class="avatar-uploader" :limit="1" list-type="picture-card" :on-preview

  • vue+element实现图片上传及裁剪功能

    本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下 随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 1 .安装 vue-cropper npm install vue-cropper 2.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 具体可见官网 demo <template> <div> <h1&

  • Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • vue实现axios图片上传功能

    vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传. 在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型. 经过多次摸索总结了以下经验,以供参考. 首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js. 我们的qs序列化和数据拦截写在index.js中 import axios from "axios"; import config fr

  • Vue formData实现图片上传

    本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下 import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new Promise((resolve, reject) => { let file =

  • vue+node实现图片上传及预览的示例方法

    本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

  • vue实现简单图片上传

    本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 功能 实现图片上传 显示进度条 <template> <div class="about"> <div> <div> <img :src="'https://www.xxx.com'+item" alt="" v-for="item in pics" > </div> <

  • vue实现简单图片上传功能

    本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 就是给自己留个参照,有什么不合理的地方请大家指出来,然后调整 1.效果展示 2.html相关的代码展示 <div class="form-list">        <label class="label-one">商品图片</label>        <div class="add-picture">        

随机推荐