Spring Boot+Vue+Element Plus 实现上传图片功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在写项目实训作业时遇到了需要上传图片的功能，分享一下方法

---

一、Element Plus

我这里使用的是npm安装

• 在终端中进入到项目，输入npm install element-plus --save
• 在main.js中导入Element Plus

import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

• 使用上传组件<el-upload></el-upload>

			<el-upload
                v-model:file-list="fileList"
                action="http://127.0.0.1:8080/api/file/upload" // 上传方法url
                list-type="picture-card" // 显示类型
                :on-preview="handlePictureCardPreview" // 钩子函数，上传执行前调用
                :on-remove="handleRemove" // 删除图片后调用
                :on-success="handleSuccess" // 上传成功后调用
           	>
	           <el-icon>
	             <Plus/>
	           </el-icon>
         </el-upload>
         <el-dialog v-model="dialogVisible">
          <img :src="dialogImageUrl" alt="Preview Image"/>
        </el-dialog>

提示：action对应后端上传图片的url，必须要有这个属性

二、 Spring Boot

service方法

private  final static String rootPath = "C:/attachment/";

    @Override
    public List<Image> upload(MultipartFile[] multipartFiles) {
        File fileDir = new File(rootPath);
        if (!fileDir.exists() && !fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        List<Image> list = new ArrayList<>();
        try {
            if (multipartFiles != null && multipartFiles.length > 0) {
                for(int i = 0;i<multipartFiles.length;i++){
                    String fileSuffix = getFileExtension(multipartFiles[i].getOriginalFilename());
                    try {
                        String fileName = UUID.randomUUID().toString();
                        String storagePath = rootPath+fileName+getFileExtension(multipartFiles[i].getOriginalFilename());
                        System.out.println("上传的文件：" + multipartFiles[i].getName() + "," +
                                multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                +"，保存的路径为：" + storagePath+i);
                        Path path = Paths.get(storagePath);
                        Files.write(path,multipartFiles[i].getBytes());
                        Image image = new Image(multipartFiles[i].getOriginalFilename(),storagePath);
                        list.add(image);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        //向前端返回一个图片列表
        return list;
    }
    private String getFileExtension(String fileName) {
        int dotIndex = fileName.lastIndexOf(".");
        if (dotIndex >= 0 && dotIndex < fileName.length() - 1) {
            return fileName.substring(dotIndex);
        }
        return "";
    }

controller方法

@RestController
@RequestMapping("/api/file")
@Api(tags = "文件上传")
public class UploadController {
    @Resource
    UploadService uploadService;

    @ApiOperation(value = "上传图片")
    @RequestMapping("/upload")
    Object uploadImage(@RequestParam("file") MultipartFile[] multipartFiles){
        List<Image> list =uploadService.upload(multipartFiles);
        return uploadService.upload(multipartFiles);
    }

}

执行后：

---

总结

这就是Spring Boot + Vue + Element Plus上传图片的过程了，若有不懂的可以私信我