文件上传的演示

最新推荐文章于 2024-06-11 18:43:53 发布

脚后跟vuhi有几个vu环境改变v

最新推荐文章于 2024-06-11 18:43:53 发布

阅读量273

点赞数

文章标签： gnu 蓝桥杯 fpga开发

本文链接：https://blog.csdn.net/m0_69720862/article/details/125253358

版权

1.文件上传到本地服务器。

(1)文件上传的依赖。

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

(2)创建一个页面

<%--
  Created by IntelliJ IDEA.
  User: 冰冰
  Date: 2022/6/9
  Time: 19:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>upload</title>
</head>
<body>

<%--

      method: 提交方式 文件上传必须为post提交。
      enctype:默认application/x-www-form-urlencoded:表示提交表单数据
              multipart/form-data:可以包含文件数据
      input的类型必须为file类型，而且必须有name属性 name里面的名字需要和Controller里面的MultipartFile名字对应

--%>

<form method="post" action="upload" enctype="multipart/form-data">
    <input type="file" name="myfile"/><br>
    <input type="submit" value="提交"/>
</form>
</body>

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

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

(4)创建upload接口方法

package com.lrb.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.UUID;

//上传图片到本地
@Controller
public class UploadController  {

//MultipartFile 参数名必须和<input type="file" name = "myfile"/>中name属性相同
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    @PostMapping("/upload")
    public String upload02(MultipartFile myfile,HttpServletRequest request) throws Exception{
        //获取上传到服务器的文件夹路径
        String path = request.getSession().getServletContext().getRealPath("upload");
        //判断该目录是否存在
        File file = new File(path);
        if (!file.exists()){
            file.mkdirs();
        }

        //给图片起随机编码 把myfile保存到本地服务下某个文件夹中
        String fileName = UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        File target = new File(path + "/" + fileName);
        myfile.transferTo(target);
        //把myfile转移到目录下
        System.out.println(path);
        return "index.jsp";
    }

}

2. elementui+vue+axios完成文件上传

(1)前端页面的布局

<%--
  Created by IntelliJ IDEA.
  User: 冰冰
  Date: 2022/6/9
  Time: 20:22
  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文件 这个必须在element之前引入-->
    <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="upload1"
            :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) {
                console.log(res);
                this.imageUrl=res.data;
            },
            //上传前触发的方法
            beforeAvatarUpload(file) {
                //此处设置条件,可在下面的if中添加进行判断
                //图片格式是计算机存储图片的格式，常见的存储的格式有
                //bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif等。.
                const isGIF = file.type==='image/gif'
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return  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>

(2)后台的接口

package com.lrb.controller;

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.util.HashMap;
import java.util.Map;
import java.util.UUID;

@Controller
public class UploadController1 {
    @RequestMapping("/upload1")
    @ResponseBody
    public Map upload02(MultipartFile file, HttpServletRequest request) {
        try {
            //获取上传到服务器的文件夹路径
            String path = request.getSession().getServletContext().getRealPath("upload");
            File file1 = new File(path);
            //输出目录到控制台上
            System.out.println(path);
            //判断指定的目录是否存在 exists 和 not exists 返回的结果类型是 Boolean
            if (!file1.exists()){
                //mkdir是(make directories)的缩写,其功能为创建一个目录
                file1.mkdirs();
            }


            //给添加进去的图片生成一个随机名字 设置上传后的文件名称
            String filename = UUID.randomUUID().toString().replace("-","")+file.getOriginalFilename();
            File target = new File(path+"/"+filename);
            file.transferTo(target);
            //设置key值和value值 用于存储信息
            Map map=new HashMap();
            map.put("code",2000);
            map.put("mag","上传成功");
            //通过访问服务器地址来访问图片
            map.put("data","http://localhost:8080/shangchuan/upload/"+filename);
            return map;
        }catch (Exception e){
            e.printStackTrace();
            }
            Map map = new HashMap();
            map.put("code",5000);
            map.put("msg","上传失败");
            return map;
        }

    }

3. 上传到oss阿里云的服务器

3.1.申请阿里云的密钥此处省略

3.2.引入阿里云的OSS依赖

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

3.3.代码

package com.lrb.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import java.io.FileInputStream;
import java.io.InputStream;

public class UploadController2 {
//上传图片到阿里云
    public static void main(String[] args) throws Exception {
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用R+
        // AM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "LTAI5tQJ8uMmiDqH8LsaMzJs";
        String accessKeySecret = "8qWJQi0bHkpR2E67DmALF2fm4Awl58";
        // 填写Bucket名称,例如examplebucket。
        String bucketName = "nanyanreai";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        //你把图片上传到阿里云中的名字是 在这里设定
        String objectName = "2.png";
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        //此处填写图片在本地中的路径
        String filePath= "C:\\Users\\冰冰\\Desktop\\1.png";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = new FileInputStream(filePath);
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception oe) {
            oe.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}

4. elementui 异步上传OSS服务器

4.1.前端

<%--
  Created by IntelliJ IDEA.
  User: 冰冰
  Date: 2022/6/9
  Time: 20:22
  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文件 这个必须在element之前引入-->
    <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="upload3"
            :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) {
                console.log(res);
                this.imageUrl=res.data;
            },
            //上传前触发的方法
            beforeAvatarUpload(file) {
                //此处设置条件,可在下面的if中添加进行判断
                //图片格式是计算机存储图片的格式，常见的存储的格式有
                //bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif等。.
                const isGIF = file.type==='image/gif'
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return  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>

4.2.后端

package com.lrb.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;

//封装一个工具类
public class OssUtils {
    public static String upload(MultipartFile myfile){
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "LTAI5tQJ8uMmiDqH8LsaMzJs";
        String accessKeySecret = "8qWJQi0bHkpR2E67DmALF2fm4Awl58";
        // 填写Bucket名称，例如examplebucket。
        // springmvc-project01
        String bucketName = "nanyanreai";
        //填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        //你把图片上传到阿里云中的名字是 在这里设定
        //填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        //如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        //此处填写图片在本地中的路径

        //你上传到oss后的名字 会根据日期帮你创建文件夹。
        String objectName = fileName(myfile);
        //创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = myfile.getInputStream();
        //创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception oe) {
            oe.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        System.out.println(url);
        return url;
    }

    //获取上传到oss后的名字
    private static String fileName(MultipartFile myfile){
        Calendar calendar = Calendar.getInstance();
    //建立文件夹,并根据所设定的,获取年月日建立三级文件目录,并根据设定生成随机ID
        String name = calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+calendar.get(Calendar.DATE)+"/"+
                UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        return name;
    }

}

4.3. controller接口

package com.lrb.controller;

import com.lrb.utils.OssUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;

//element+oss进行阿里云上传
@RestController
public class UploadController3 {
    @RequestMapping("/upload3")
    public Map upload3(MultipartFile file){
        try {
            String url = OssUtils.upload(file);
            Map map = new HashMap();
            map.put("code",2000);
            map.put("mag","上传成功");
            map.put("data",url);
            return map;
        }catch (Exception e){
            e.printStackTrace();
        }
            HashMap map = new HashMap();
            map.put("code",5000);
            map.put("msg","上传失败");
            return map;
    }
}

5. 保存用户信息--头像

5.1.前端的布局

<%--
  Created by IntelliJ IDEA.
  User: 冰冰
  Date: 2022/6/11
  Time: 8:28
  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文件 这个必须在element之前引入-->
    <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">
    <el-form  label-width="80px" :model="userForm">
        <el-form-item label="头像:">
            <el-upload
                    class="avatar-uploader"
                    action="upload4"
                    :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>
        </el-form-item>
        <el-form-item label="账号:">
            <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
            <el-input v-model="userForm.pwd"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
            <el-input v-model="userForm.address"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            userForm:{},
            imageUrl:""
        },
        methods:{
            handleAvatarSuccess(result,file){
                this.imageUrl=result.data;
                //为表单对象添加头像地址的属性
                this.userForm.avatarUrl=this.imageUrl;
            },
            //提交
            onSubmit(){
            //不能加杠 要不然它是根目录
                axios.post("addUser",this.userForm).then(function(result){

                });
            },
            //上传前触发的方法
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return 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>

5.2.后台代码

package com.lrb.controller;

import com.lrb.entity.User;
import com.lrb.utils.CommonResult;
import com.lrb.utils.OssUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;



//该注解下所有的方法都是返回json数据
@RestController
public class UploadController4 {
//把请求路径映射到响应的方法上。
    @RequestMapping("/upload4")
    public CommonResult upload4(MultipartFile file){
        try {
            String avatar = OssUtils.upload(file);
            return new CommonResult(2000,"上传成功",avatar);
        }catch (Exception e){
            e.printStackTrace();
        }
        return new CommonResult(5000,"失败",null);
    }

    @PostMapping("/addUser")
//把请求的json数据转换成java对象
    public CommonResult addUser(@RequestBody User user){
        System.out.println(user);
        return new CommonResult(2000,"成功",null);
    }

}