文件上传._bucket上传文件界面-CSDN博客

本文链接：https://blog.csdn.net/m0_69719993/article/details/125249422

这篇博客介绍了文件上传的原理，包括通过AJAX、ElementUI-Vue以及普通的文件上传方式。重点讲解了使用ElementUI、Vue和Axios组合实现文件上传到阿里云OSS的过程，包括申请OSS服务、获取阿里云密钥以及异步上传的步骤。还讨论了本地服务器文件上传的缺点和解决方案。

摘要由CSDN通过智能技术生成

<%--
  Created by IntelliJ IDEA.
  User: Acer
  Date: 2022/6/9
  Time: 15:42
  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>
    <%--文件上传方式为post提交
    enctype就是encodetype就是编码类型的意思
    这里的form表单必须要设置enctype，文件上传的方式必须要用到post，因为get的长度有限制，当文件过大的时候无法进行上传
    enctype 默认application/x-www-form-rulencoded表示提交表单数据   multipart/form-data可以包含文件数据
    input 的type类型必须为file类型且必须有name属性
    --%>
    <form method="post" action="upload01" enctype="multipart/form-data">
        <input type="file" name="myfile">
            <input type="submit" value="提交"/>
    </form>
</body>
</html>

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

<!--文件上传解析器 id的名字必须为multipartResolver-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760"/>
    </bean>

(3)创建upload01接口方法

@Controller
public class ControllerImg {
    //接受参数处理文件
    @RequestMapping("/upload01")
    //MultipartFile myfile  名字必须为和表单的name属性一样
    public String upload01(MultipartFile myfile, HttpServletRequest request) throws IOException {
        //设定文件的存储路径 如果文件不存在就创建文件
        String path=request.getSession().getServletContext().getRealPath("uplaod");
        //创建文件对象存储路径
        File file = new File(path);
        System.out.println(file);
        if (!file.exists()){
            file.mkdirs();
        }
        // 因为重复的文件名 会替换之前的文件，所以使用UUID，可以防止文件名重复  getOriginalFilename是获得文件全名
        String filename= UUID.randomUUID().toString().replace("-","")+ myfile.getOriginalFilename();
        //获取文件路径和文件名
        File file1 = new File(path + "/" + filename);
        // 文件转换，将文件存储转换到file1里
        myfile.transferTo(file1);
        return "";
    }
}

文件上传到本地服务器的缺点?

1. 当服务器重启，本地服务的文件没了。
2. 搭建服务器集群。A服务器1000， B服务器.........
客户第一次上传时访问的是A服务器。
客户第二次访问文件，访问的是B服务器。

如何解决本地服务器上传的缺点:

（1）自己搭建一个文件服务器。不会重启。维护。

（2）使用第三方的文件服务器.

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

<%--
  Created by IntelliJ IDEA.
  User: Acer
  Date: 2022/6/10
  Time: 13:55
  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>
    <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 {