vue上传minio后无法预览 文件损坏

文件损坏或者无法预览基本上都和两个问题有关

1. Minio内部文件类型错误
2. 上传文件时传输的数据存在问题

需要注意上传文件需要使用PUT方法，同时需要提交二进制数据
所以web页面在上传之前需要读取文件二进制后在上传，同时需要注意调整Content-Type为实际的文件MIME类型

可以在选择文件后通过FileReader读取文件的二进制数据，随后直接提交二进制数据即可

测试代码

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

const count = ref(0)
let fileByte = null;

onMounted(() => {
  let fileInput = document.getElementById('file-input');
  // console.log(fileInput)

  fileInput.onchange = function () {
    var file = this.files[0];
    if (!!file) {
      var reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = function () {
        var binary = this.result;
        fileByte = binary;
        
        console.log(fileByte)
      }
    }
  }
});


async function increment() {
  console.log(fileByte)
  // return;
  let uploadURL = "http://192.168.2.90:9000/mes/test.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20240710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240710T031256Z&X-Amz-Expires=1000&X-Amz-SignedHeaders=host&X-Amz-Signature=e58dba3dcde558f84e6d993987c75624023983827ede493957f9ba6ed8d71f3f";


  axios.put(uploadURL, fileByte, {
    headers: {
      'Content-Type': "application/pdf"
    },
    // responseType: "blob"
  }).then((response) => {
    console.log('文件上传成功：', response);
  }).catch((error) => {
    console.error('文件上传失败：', error);
  });

  //也可以使用XMLHttpRequest提交
  // var xhr = new XMLHttpRequest();
  // xhr.open("PUT", uploadURL);
  // // xhr.overrideMimeType("application/pdf");
  // xhr.setRequestHeader('Content-Type',"application/pdf");
  // //直接发送二进制数据
  // if (xhr.sendAsBinary) {
  //   xhr.sendAsBinary(fileByte);
  // } else {
  //   xhr.send(fileByte);
  // }

  // // 监听变化
  // xhr.onreadystatechange = function (e) {
  //   if (xhr.readyState === 4) {
  //     if (xhr.status === 200) {
  //       // 响应成功       
  //     }
  //   }
  // }
}
</script>

<template>
  <input type="file" id='file-input'>


  <input type="button" value="test" @click="increment" />
</template>

[参考]
使用restsharp上传minio后文件无法预览
前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输