文件图片上传

vue

----------------------------------------

<el-upload
class="upload-demo"
ref="upload"
:limit="limitNum"
:class="{hide:hideUploadEdit}"
:on-remove="handleRemove"
:on-change="handleEditChange"
:http-request="ImgUploadSectionFile"
:before-upload="beforeAvatarUpload"
:with-credentials="true"
:auto-upload="true"
accept=".png, .jpg"
action=""
list-type="picture-card"
:file-list="fileList">
<i slot="trigger" class="el-icon-plus"></i>
<!-- <el-button slot="trigger" type="primary">选取图片</el-button> -->
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>

---------------------------------------------

js

---------------------------------------------

// http-request自定义上传
ImgUploadSectionFile(file) {
this.file = file;

}

，

// 上传到服务器
submitUpload() {
console.log(this.file);
console.log("this.fileList:", this.fileList);
console.log(this.fileListaaa);
console.log(this.fileListaaa[0]);

if (!this.file) {
this.$message("请选择图片");
} else {
let formData = new FormData(); //formdata格式
// formData.append("picture",this.fileList[0].raw);
// formData.append("picture", this.file.file);
// for(var file in fileList){
// formData.append('picture', file.raw)
// }
//循环已选择文件列表 fileList，将文件取出放入 formData 的file数组中
for (let i = 0; i < this.fileListaaa.length; i++) {
formData.append("picture",this.fileListaaa[i].raw);
}
// this.$refs.testForm.$children[0].fileList.forEach(function(file){
// //三个参数依次是: @RequestParam中的字符串, 文件对象, 文件的名称(***.png)
// form.append("picture", file.raw);
// })
console.log(formData);
axios({
method: "post",
url: baseUrl + '/medemr/maintain/yg/queryYG1', //这里填写上传图片的接口,
data: formData, //这里可以填写上传时携带的数据,不需要可以不写
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(result => {
console.log("上传成功:", result);
})
.catch(err => {
console.log(err);
});
}
},

-------------------------------------------------

后台

-----------------------------------------------------

 @RequestMapping("queryYG1")
    @ResponseBody
    public FileResult reSromsg1(@RequestParam("picture") MultipartFile[] picture) {
        System.out.println(JsonDateUtils.getJson(new Date()));
//        System.out.println(JsonDataUtils.getJson(picture));
        System.out.println("您已进入图片上传服务");
        System.out.println("picture" + picture.length);
        System.out.println(picture[0]);
        JSONObject jsonObject = null;

        //获取文件在服务器的储存位置
        String path = "G://jsp学习";
        File filePath = new File(path);
        logger.info("文件的保存路径：" + path);
        if (!filePath.exists() && !filePath.isDirectory()) {
            logger.info("目录不存在，创建目录:" + filePath);
            filePath.mkdir();
        }

        boolean flag = true;
        for (int i = 0; i < picture.length; i++) {
            //获取原始文件名称(包含格式)
            String originalFileName = picture[i].getOriginalFilename();
            logger.info("原始文件名称：" + originalFileName);

            //获取文件类型，以最后一个`.`为标识
            String type = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
            logger.info("文件类型：" + type);
            //获取文件名称（不包含格式）
            String name = originalFileName.substring(0, originalFileName.lastIndexOf("."));

            String fileName = UUIDUtils.getUUID32() + name + "." + type;
            logger.info("新文件名称：" + fileName);

            //在指定路径下创建一个文件
            File targetFile = new File(path, fileName);
            logger.info("图片地址：" + path + "/" + fileName);
            //将文件保存到服务器指定位置
            try {
                picture[i].transferTo(targetFile);
                logger.info("上传成功");
                //将文件在服务器的存储路径返回
//                return new FileResult(true,fileName,path+"/"+fileName);
            } catch (IOException e) {
                logger.info("上传失败");
                e.printStackTrace();
//                return new FileResult(false, "上传失败","");
            }
        }
        if (flag) {
            return new FileResult(true, "", path + "/" + "");
        } else {
            return new FileResult(false, "上传失败", "");
        }

    }