SpringBoot结合Vue实现图片上传

短命女 2022-05-08 09:28 667阅读 0赞

# SpringBoot结合Vue实现图片上传 #

### 效果 ###

*  页面图片上传
    
     *  ![VLKe5Ri.png][]
 *  上传完成之后
    
     *  ![pA39FN8.png][]

### Vue中图片上传核心代码 ###

*  在main.js中引入axios
    
     
    
        import axios from 'axios'
        Vue.prototype.$ajax = axios;
 *  在图片上传的文件中写文件上传控件
    
     
    
        <li>
            <h3>添加新图：</h3>
            <input type="file" id="saveImage" name="myphoto" accept="image/png,image/gif,image/jpeg"
                   ref="new_image">
            <el-button @click="addImage">确认添加</el-button>
        </li>
 *  添加图片函数
    
     
    
        addImage: function () {
            let self = this;
            if (self.$refs.new_image.files.length !== 0) {
                var formData = new FormData()
                formData.append('image_data', self.$refs.new_image.files[0]);
                //单个文件进行上传
                self.$ajax.post('/addImage', formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(response => {
        
                })
            }
        }

### SpringBoot中图片下载核心控制类代码 ###

*  方法核心代码
    
     
    
        @RequestMapping("/addImage")
        @ResponseBody
        public String addImage(@RequestParam(name = "image_data", required = false) MultipartFile file) {
            //文件上传
            if (!file.isEmpty()) {
                try {
                    //图片命名
                    String newCompanyImageName = "newPIC";
                    String newCompanyImagepath = "D:\\"+newCompanyImageName;
                    File newFile = new File(newCompanyImagepath);
                    if (!newFile.exists()) {
                        newFile.createNewFile();
                    }
                    BufferedOutputStream out = new BufferedOutputStream(
                            new FileOutputStream(newFile));
                    out.write(file.getBytes());
                    out.flush();
                    out.close();
                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                    return "图片上传失败！";
                } catch (IOException e) {
                    e.printStackTrace();
                    return "图片上传失败！";
                }
            }
            return "图片上传失败！";
        }

[VLKe5Ri.png]: https://i.imgur.com/VLKe5Ri.png
[pA39FN8.png]: https://i.imgur.com/pA39FN8.png