仙桃网站设计,免费的照片编辑软件,运营商推广5g技术,河南城乡建设部网站vueminio实现文件上传操作 minio文件上传vueminio实现文件上传操作 minio文件上传
minio文件上传有两种方法#xff1a;
第一种是通过ak#xff0c;sk#xff0c;调用minio的sdk putObject进行文件上传#xff1b;该方法支持go#xff0c;java#xff0c;js等各种语言minio实现文件上传操作 minio文件上传vueminio实现文件上传操作 minio文件上传
minio文件上传有两种方法
第一种是通过aksk调用minio的sdk putObject进行文件上传该方法支持gojavajs等各种语言第二种是后端生成presignedUrl前端通过该url实现文件上传
vueminio实现文件上传操作
以上说的两种方法中第一种方法会把aksk暴露给前端造成一定的安全隐患所以如果要使用第一种方法需要向后端请求生成临时的aksk
这边我们实现了第二种方法。
前端代码如下这种方法的思路是先向后端请求生成presigned-url然后再通过binary的方式进行文件上传注意这里有一个小坑就是上传文件不要使用form-data否则会在文件加上WebKitFormBoundary前缀minio生成的presigned-url没有对此进行解析这种上传方式会导致如.png .mp4的文件打不开。
templateel-upload refuploadRef :http-requestuploadSubmit :auto-uploadfalse v-model:file-listfileList :limit1:on-successonSuccesstemplate #triggerel-button typeprimary stylewidth: 100px;select/el-button/templateel-button typesuccess clickuploadRef.submit() stylemargin-left: 2rem;width: 100px;upload/el-buttondiv classdemo-progressel-progress :percentagepercent //divel-button sizesmall typeprimary clickcancelUpload取消上传/el-button/el-upload
/templatescript 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
