快捷導(dǎo)航

elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器

更新時間：2022年08月15日 17:18:01 作者：阿磊學(xué)不會001

這篇文章主要為大家詳細介紹了elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器的具體代碼，供大家參考，具體內(nèi)容如下

文件上傳的原理

加入文件上傳的依賴

<!--文件上傳的依賴-->
? ? <dependency>
? ? ? <groupId>commons-fileupload</groupId>
? ? ? <artifactId>commons-fileupload</artifactId>
? ? ? <version>1.4</version>
</dependency>

創(chuàng)建一個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 ?表示提交表單數(shù)據(jù)
? ? ? ? ? ? multipart/form-data 可以包含文件數(shù)據(jù)
? ? ? ? ? ? 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">
? ? ? ? ? <!--這里的單位為字節(jié)10M*1024K*1024-->
? ? ? ? ? <property name="maxUploadSize" value="10485760"/>
? ? ?</bean>

創(chuàng)建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)得到本地服務(wù)目錄的地址
? ? ? ? String path = request.getSession().getServletContext().getRealPath("upload");
? ? ? ? //(2)判斷該目錄是否存在
? ? ? ? File file=new File(path);
? ? ? ? if(!file.exists()){
? ? ? ? ? ? file.mkdirs();
? ? ? ? }
? ? ? ? //(3)//把myfile保存到本地服務(wù)中某個文件夾下。 缺點:文件的名稱
? ? ? ? String filename= UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
? ? ? ? File target=new File(path+"/"+filename);
? ? ? ? myfile.transferTo(target); //把myfile轉(zhuǎn)移到目標目錄下
? ? ? ? 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:{
? ? ? ? ? ? //上傳成功后觸發(fā)的方法
? ? ? ? ? ? handleAvatarSuccess(res, file) {
? ? ? ? ? ? ? ? this.imageUrl=res.data;
? ? ? ? ? ? },
? ? ? ? ? ? //上傳前觸發(fā)的方法
? ? ? ? ? ? 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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: