Vue+SSM使用Elenent的上传组件.实现单文件上传手动上传.

Vue+SSM使用Elenent的上传组件.实现单文件上传手动上传.

<template>
    <div>
        <el-upload
                action=""
                :auto-upload='false'
                :file-list="fileList"
                :on-change="handleChange"
        >
        
        <!-- action 我这里演示手动上传就不需要选择服务器地址,但是该参数必须要,不然会报错 -->
        <!-- :auto-upload='false' 改属性默认为 true 会默认直接提交文件 我这边手动提交所以选择 false-->
        <!-- :file-list="fileList" 官网上是上传的文件列表, 我这边为了单文件,实现第二次选择上传清空-->
        <!-- :on-change="handleChange" 文件状态改变时的钩子函数 -->
        <!-- 你可以自己测试完成之后,添加更多的样式 -->
        
        	<!--该按钮选取文件 是el-upload组件的一个插槽,不添加改方法你不能选取文件-->
            <el-button slot="trigger" type="primary" @click="delFile">选取文件</el-button>
            <!--单击上传到服务器(提交)按钮 -->
            <el-button type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
    </div>
</template>
<script>
    export default {
        name: "test",
        data() {
            return {
                fileList: [],
            };
        },
        methods: {
            /*重新选择的时候清楚原来的文件*/
            delFile() {
                this.fileList = [];
            },
            /*文件状态改变时的钩子函数*/
            handleChange(file, fileList) {//该方法很重要,从你选择的fileList文件赋值给你定义的this.fileList
                this.fileList = fileList;
            },
            /*单击上传到服务器(提交)按钮*/
            submitUpload() {
                let formData = new FormData();//文件转换
                //fileList 对应你服务器接受名称
                formData.append("fileList", this.fileList[0].raw);
                //这边"$http"我重新封装了axios,你可以改成自己的.但是必须是post来请求,
                //http://localhost:8082/yiban_zlj/fileUpload改成你服务器文件上传的API地址
                //formData请求带的数据
                //{"Content-Type": "multipart/form-data;charset=utf-8"}是文件上传必须要的
                //最后可以打印返回的服务器返回的数据,如果控制台报错接受你哪里没有写对
                this.$http.post('http://localhost:8082/yiban_zlj/fileUpload', formData, {"Content-Type": "multipart/form-data;charset=utf-8"}).then(res => {
                    console.log(res)
                })
            }
        }
    };
</script>
<style scoped>
</style>

我这边用SSM写的后台,控制层,上传的API

    @ResponseBody
    @RequestMapping(value = "/fileUpload")
    public String handlerForUpload(@RequestParam("fileList") MultipartFile multipartFile, HttpServletRequest request) {
        //判断所上传文件是否存在
        if (multipartFile.isEmpty()) {
            return "上传错误";
        }
        //获取上传文件的原始名称
        String originalFilename = multipartFile.getOriginalFilename();
        //设置上传文件的保存地址目录
        String dirPath = request.getServletContext().getRealPath("/upload/");
        File filePath = new File(dirPath);
        //如果保存的地址不存在,就先创建目录
        if (!filePath.exists()) {
            filePath.mkdirs();
        }
        //获取当前文件的后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
        //使用UUID重新命名上传的文件名称(UUID(唯一识别码)+原始文件名称后缀)
        String newFileName = UUID.randomUUID() + "." + suffix;
        try {
        //创建可能会有错误,强制添加异常
            multipartFile.transferTo(new File(dirPath + newFileName));
        } catch (IOException e) {
            e.printStackTrace();
            return "上传错误";
        }
        System.out.println(dirPath + newFileName);
        return "上传成功"+"文件地址="+dirPath + newFileName;
    }

标签：文件,Vue,String,fileList,newFileName,Elenent,dirPath,上传
来源： https://blog.csdn.net/qq_34271516/article/details/105885775