使用minio伺服器實現普通檔案、圖片等上傳功能(Springboot/Springcloud)
阿新 • • 發佈:2021-09-04
一、minio伺服器下載安裝,進入官網http://www.minio.org.cn/按自己需求直接下載,我這裡下載windows64的
二、下載完後進入可以看到minio.exe的目錄下開啟cmd命令模式輸入minio.exe server D:\file即可啟動,可以檢視到其地址,賬號密碼等資訊
三、在瀏覽器輸入上圖中的地址即可進入登入頁面,輸入上圖中的賬號密碼即可進入
四、新增依賴,不要使用過高版本的,本例中使用的一些方法在8.0等高版本中已棄用
<dependency> <groupId>io.minio</groupId> <artifactId>minio</artifactId> <version>3.0.10</version> </dependency>
五、在配置檔案application.yml新增配置
minio: endpoint: http://127.0.0.1:9000 #minio服務所在地址 bucketName: picture #儲存桶名稱 accessKey: minioadmin #訪問的key secretKey: minioadmin #訪問的祕鑰
六、Controller實現,上傳成功後返回檔案的地址URL,在瀏覽器輸入直接可以看到上傳的檔案
@RestController public class UploadController { @Value("${minio.endpoint}")private String endpoint; //minio服務所在地址 @Value("${minio.bucketName}") private String bucketName; // mall #儲存桶名稱 @Value("${minio.accessKey}") private String accessKey; //minioadmin #訪問的key @Value("${minio.secretKey}") private String secretKey; //minioadmin #訪問的祕鑰@RequestMapping("/uploadFile") public Result uploadFile(MultipartFile file){ try { MinioClient minioClient = new MinioClient(endpoint, accessKey, secretKey); boolean isExist = minioClient.bucketExists(bucketName); if (!isExist) { minioClient.makeBucket(bucketName); minioClient.setBucketPolicy(bucketName, "*.*", PolicyType.READ_ONLY); } String filename = file.getOriginalFilename(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); //設定儲存物件名稱 String objectName = sdf.format(new Date())+"/"+filename; //把儲存物件上傳到儲存桶中 minioClient.putObject(bucketName, objectName, file.getInputStream(), file.getContentType()); System.out.println("檔案上傳成功"); String objectUrl = minioClient.getObjectUrl(bucketName, objectName); System.out.println(objectUrl); Result result = new Result(); result.setMessage(objectUrl); result.setSuccess(true); return result; } catch (Exception e) { e.printStackTrace(); return new Result(false, "檔案上傳失敗"); } } }
七、前端上傳頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>file upload</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <img :src="this.picSrc" width="400" height="300"><br/> <input type="file" ref="inputer"/><br/> <input type="button" value="上傳" @click="uploadFile()"/><br/> </div> <script> Vue.prototype.$axios = axios; var vm = new Vue({ el: '#app', data: { picSrc:'', filem:'', }, methods: { // 點選事件 uploadFile() { //獲取使用者選擇的檔案 let inputDOM = this.$refs.inputer; this.filem = inputDOM.files[0]; // 向後臺傳遞資料: var formData = new FormData(); // 向formData中新增資料: formData.append("file",this.filem); this.$axios({ method: "post", url: "http://localhost:8888/upload/uploadFile", data: formData, headers:{'Content-Type':undefined} }) .then(successResponse => { this.picSrc = successResponse.data.message; }) } } }); </script> </body> </html>uploadFile.html
八、進行上傳可以看到上傳後的結果
九、進入minio伺服器可以你看到上傳的檔案