vue+minio实现文件上传操作

minio文件上传

minio文件上传有两种方法:

  1. 第一种是通过ak,sk,调用minio的sdk putObject进行文件上传;该方法支持go,java,js等各种语言,
  2. 第二种是后端生成presignedUrl,前端通过该url实现文件上传;

vue+minio实现文件上传操作

以上说的两种方法中,第一种方法会把ak,sk暴露给前端,造成一定的安全隐患;所以如果要使用第一种方法,需要向后端请求生成临时的ak,sk;

这边我们实现了第二种方法。

前端代码如下,这种方法的思路是先向后端请求生成presigned-url,然后再通过binary的方式进行文件上传;注意这里有一个小坑,就是上传文件不要使用form-data,否则会在文件加上WebKitFormBoundary前缀,minio生成的presigned-url没有对此进行解析,这种上传方式会导致如.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.data
            axios({
                method: "put",
                url: presignedUrl,
                data: item, // 重点1,直接将原始二进制流赋给data
                headers: {
                    "Content-Type": "application/octet-stream", // 重点2
                },
                timeout: 3600000, // ms
                onUploadProgress: 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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐