elementui+vue+axios實現文件上傳本地服務器

Posted on by

本文實例為大傢分享瞭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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：