minio文件上傳

minio文件上傳有兩種方法：

1. 第一種是通過ak，sk，調(diào)用minio的sdk putObject進行文件上傳；該方法支持go，java，js等各種語言，
2. 第二種是后端生成presignedUrl，前端通過該url實現(xiàn)文件上傳；

vue+minio實現(xiàn)文件上傳操作

以上說的兩種方法中，第一種方法會把ak，sk暴露給前端，造成一定的安全隱患；所以如果要使用第一種方法，需要向后端請求生成臨時的ak，sk；

這邊我們實現(xiàn)了第二種方法。

前端代碼如下，這種方法的思路是先向后端請求生成presigned-url，然后再通過binary的方式進行文件上傳；注意這里有一個小坑，就是上傳文件不要使用form-data，否則會在文件加上WebKitFormBoundary前綴，minio生成的presigned-url沒有對此進行解析，這種上傳方式會導(dǎo)致如.png .mp4的文件打不開。

<template><el-upload ref="uploadRef" :http-request="uploadSubmit" :auto-upload="false" v-model:file-list="fileList" :limit="1":on-success="onSuccess"><template #trigger><el-button type="primary" style="width: 100px;">select</el-button></template><el-button type="success" @click="uploadRef.submit()" style="margin-left: 2rem;width: 100px;">upload</el-button><div class="demo-progress"><el-progress :percentage=percent /></div><el-button size="small" type="primary" @click="cancelUpload">取消上傳</el-button></el-upload>
</template><script setup>
import { ref } from 'vue'
import axios from 'axios';
const uploadRef = ref();
const fileList = ref([]);
let percent = ref(0);
let Cancel = axios.CancelToken.source()async function uploadSubmit(options) {console.log(options)const item = options['file'];var presignedUrl = ""var objSize = item.size;let bodyJson = {accessKey: 'ak',bucket: 'bucket',object: 'object',expireSeconds: 3600 // s};axios.put('/path/uploadUrl', bodyJson).then(res => {if (res.status == 200) {presignedUrl = res.data.dataaxios({method: "put",url: presignedUrl,data: item, // 重點1，直接將原始二進制流賦給dataheaders: {"Content-Type": "application/octet-stream", // 重點2},timeout: 3600000, // msonUploadProgress: function (e) {percent.value = parseInt(e.loaded / objSize * 100);},cancelToken: Cancel.token}).then(res => {if (res.status == 200) {console.log('success')}}).catch(err => {console.log(err)})   }})
}const onSuccess = (response, file, fileList) => {console.log(response);console.log(file);console.log(fileList);
}function cancelUpload() {Cancel.cancel();Cancel = axios.CancelToken.source(); // 重新定義cancelToken
}</script>
<style scoped>
.demo-progress .el-progress--line {margin-bottom: 15px;width: 350px;
}
</style>