elementui+vue+axios实现文件上传本地服务器

2024-11-29 21:50:15

本文实例为大家分享了elementui+vue+axios实现文件上传本地服务器的具体代码，供大家参考，具体内容如下

文件上传的原理

加入文件上传的依赖

<!--文件上传的依赖-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
</dependency>

创建一个web页面

<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2022/6/9
  Time: 19:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--
    method: 提交的方式  文件的上传必须是post的提交
    enctype:默认为application/x-www-form-urlencoded  表示提交表单数据
            multipart/form-data 可以包含文件数据
            file 文件
            input的类型必须为 file 类型  而且必须有name 属性
--%>
<form method="post" action="upload01" enctype="multipart/form-data">
    <input type="file" name="myfile"/><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

在springmvc中配置文件上传解析器

 <!--
     id的名称必须叫multipartResolver
     -->
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
          <!--这里的单位为字节10M*1024K*1024-->
          <property name="maxUploadSize" value="10485760"/>
     </bean>

创建upload01接口方法

package com.wzl.controller;/*
 * @author     : wzl
 * @date       : 2022/6/9 19:14
 * @description: some description
 */
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.UUID;
 
@Controller
public class pictureController {
    @RequestMapping("/upload01")
    public String upload01(MultipartFile myfile, HttpServletRequest request) throws Exception{
 
        //(1)得到本地服务目录的地址
        String path = request.getSession().getServletContext().getRealPath("upload");
        //(2)判断该目录是否存在
        File file=new File(path);
        if(!file.exists()){
            file.mkdirs();
        }
        //(3)//把myfile保存到本地服务中某个文件夹下。 缺点:文件的名称
        String filename= UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        File target=new File(path+"/"+filename);
        myfile.transferTo(target); //把myfile转移到目标目录下
        return "";
    }
}

加入web后

<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2022/6/9
  Time: 20:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入element的css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!--引入vue的js文件-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!--element的js文件-->
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="app">
    <%--action：文件上传的路径--%>
    <el-upload
            class="avatar-uploader"
            action="/upload02"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            imageUrl:"",
        },
        methods:{
            //上传成功后触发的方法
            handleAvatarSuccess(res, file) {
                this.imageUrl=res.data;
            },
            //上传前触发的方法
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>
 
<style>
    .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: 178px;
        height: 178px;
        display: block;
    }
</style>
</html>

后台的接口

package com.wzl.controller;/*
 * @author     : wzl
 * @date       : 2022/6/9 20:40
 * @description: some description
 */
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
 
@Controller

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Jquery插件之多图片异步上传

1.初始化上传控件数量. 复制代码代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_
Axios和Jquery实现文件上传功能

本文实例为大家分享了Axios和Jquery实现文件上传的具体代码,供大家参考,具体内容如下 Jquery上传 jquery文件时,后端好像并没有经过SpringMVC处理,没有被封装成一个MultiPartFIle对象,可通过原生的Servlet API request.getInputStream()获取.至于为什么没被SpringMVC封装成MultipartFile对象目前还没有研究透彻.可能是请求内容类型没有设置成 multipart/form-data.下面是jquery上传文件的代
Jquery ajaxsubmit上传图片实现代码

而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了这篇文章直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个郁闷的方式么?? 于是不甘心的我打开了更
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧: 1. 下载官方网站:http://www.uploadify.com/ 直接下载:jquery.uploadify-v2.1.0.rar 我的Demo: MyUpload.rar 官方网站也有demo 下载解压后: 说明:它里面有demo 但是是PHP的,还有一个帮助文档:uploadify v2.1.0
jQuery Ajax 上传文件处理方式介绍(推荐)

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J
jQuery Ajax文件上传(php)

如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码代
JQuery上传插件Uploadify使用详解及错误处理

什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使用. 下载官方下载官方文档官方演示我们提供的Uploadify下载地址如何使用 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFile文
vue中element-ui使用axios上传文件

本文实例为大家分享了vue中element-ui使用axios上传文件的具体代码,供大家参考,具体内容如下环境:vue2.5.6+axios0.18.1+element-ui2.15.1 在使用element UI的upload组件上传文件时,遇到一些问题,网上的说法不尽如是,在此记录其实最主要的估计就是axios相关的问题,因我们平时开发的vue项目都是封装过axios后进行api的调用,但上传操作跟一般的api请求不同,所有总是报错,故需要建立新的axios实例. 文件上传类型可以在el
Vue+Axios实现文件上传自定义进度条

前文: 之前一直用Elemet-UI的upload组件,但是ui给出的样式Element-UI满足不了,所以决定自己写一个玩玩总体分三步: 1.页面布局(自定义上传组件样式)2.Axios上传3.监听Process 联动页面实现进度条成果 1.页面布局 <div class="display-upload-wrapper"> <div class="innier-upload-wrapper" :style="innerUplo
Axios+Spring Boot实现文件上传和下载

本文实例为大家分享了Axios+Spring Boot实现文件上传和下载的具体代码,供大家参考,具体内容如下 1.所用技术前端:Vue + Axios 后端:Springboot + SpringMVC 2.单文件上传后端代码只需要使用MultipartFile类配合RequestBody注解即可 @PostMapping("your/path") public ResultData courseCoverUpload(@RequestBody MultipartFile fil

elementui+vue+axios实现文件上传本地服务器

相关推荐

随机推荐