zoukankan      html  css  js  c++  java
  • vue上传文件前台及后台接收【我】

    前台:

    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
            <script src="jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
        </head>
        <body>
            <div id="app">
                {{message}}
                <input type="file" name="file" id="file" @change='onUpload'>//注意不能带括号
            </div>
    
        </body>
    </html>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'test',
            },
            methods: {
                //上传图片
                onUpload(e) {
                    var formData = new FormData();
                    formData.append('file', e.target.files[0]);
                    formData.append('type', 'test');
                    $.ajax({
                        // url: '/ShopApi/util/upload.weixun',
                        url: 'http://localhost:8083/order/process/upload',
                        type: 'POST',
                        dataType: 'json',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: (res) => {
                            if (res.code === 200) {
                                alert(6)
                            }
                        },
                        error: function(err) {
                            alert("网络错误");
                        }
                    });
                }
            }
    
        });
    </script>

    后台:

     @PostMapping("/upload")
        public Object batchImportUpload(@RequestParam("file") MultipartFile uploadFile) throws IOException {
            log.info("在线批量导入req:");
    //      另一种方法参考
    //      https://www.cnblogs.com/cheng2839/p/12660411.html
            //获取项目目录临时路径
            String staticPath = ClassUtils.getDefaultClassLoader().getResource("mapper").getPath();
            //生成临时目录
            File tempfolder = new File(staticPath + "/uploadFile/");
            if (!tempfolder.isDirectory()) {
                tempfolder.mkdirs();
            }
            //源文件名
            String oldName = uploadFile.getOriginalFilename();
            //新文件名
            String newName = System.currentTimeMillis() + oldName.substring(oldName.lastIndexOf("."));
            File newFile = new File(tempfolder, newName);
            //填充新文件
            uploadFile.transferTo(newFile);
            //新文件路径
            String newFileAllName = tempfolder + "/" + newName;
            log.info("临时文件全路径:{}" + newFileAllName);
            return new Response(ResultCode.OK, newFileAllName);
    
        }
  • 相关阅读:
    三大高级排序
    三大初级排序算法
    MVC的JsonResult用法
    使用dynamic类型改进反射
    正则指引-括号(3)反向引用
    正则指引-括号(2)引用分组
    正则指引-括号(1)
    正则指引-量词demo
    正则指引-字符组demo
    ASP.NET MVC 分部视图
  • 原文地址:https://www.cnblogs.com/libin6505/p/14760813.html
Copyright © 2011-2022 走看看