前端获取阿里签名路径之后上传，下载文件(axios以二进制上传文件，上传文件校验Md5，），以及取消上传

代码如下，

          <a-form-item label="上传文件"  name="name" style="display:flex;" >
            <a-upload style="display: inline-block;" :file-list="fileList" accept=".bin,.hex" :before-upload="beforeUpload" @remove="handleRemove">
              <a-button preIcon="ant-design:upload-outlined">
                选择文件
              </a-button>
            </a-upload>
          </a-form-item>
          <a-button @click="cancelUpload">
                取消上传
          </a-button>

  import SparkMD5 from 'spark-md5'
  import axios from 'axios'
   const source = ref<any>(null)
  // 上传前
  const beforeUpload: any = async(file) => {
    console.log('log->file',file);

    const res = validateAndExtract(file.name)
    if( !res.isValid){
      createMessage.error('文件名不合法');
      return false
    }
    // 获取后3位
    formData.suffix = file.name.substring(file.name.length - 3);
    formData.version = res.extractedPart

    // 使用split函数，首先通过下划线分割得到第一部分
    let parts = file.name.split('_');
    // 获取下划线分割后的第一部分，即AP01CG1A0字段
    formData.name = parts[0];
    
    if (file.size / 1024 / 1024 > 50){
      createMessage.error('文件不能超过50M');
      return false
    }
    formData.size = file.size
    const fileReader = new FileReader()
    const spark = new SparkMD5.ArrayBuffer()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = async(event) => {
      console.log('log->event========',event);
      
      spark.append(event.target.result, 'utf-8')
       const md5 = spark.end()
       console.log('log->md5',md5);
       formData.md5 = md5

       ///
       const fileName ='firmware/' + new Date().getTime()  + "."+ formData.suffix
       // 这里后端返回的url是直接可用的，看具体情况
        const signedAddress = await getUploadSignedAddress({path: fileName})
        console.log('log->signedAddress 获取签名',signedAddress);
       // 注意不能使用Form,  下载会有问题
       //  let upData = new FormData();
       // await upData.append('excelFile', new Blob([event.target.result]));
       
       // 取消上传
       source.value = axios.CancelToken.source()
       axios.put(signedAddress.result, new Blob([event.target.result]),{
            cancelToken: source.value.token,
            headers: {
            // Content-Type 为文件的 MIME 类型，例如 application/octet-stream 表示二进制数据流。
            'Content-Type': 'application/octet-stream',
            },
            // 设置 responseType 为 'blob'，以便以二进制形式发送文件。
            responseType: 'blob'
        }).then((res: any) => {
          console.log('log->res',res);
          if(res.status===200){
            formData.link = signedAddress.result
            fileList.value = [file];
          }else {
            handleRemove()
            createMessage.error('上传失败');
          }
      }).catch(error=> {

        })
    }
    return false;
  };
  
const handleRemove: any = () => {
    // const index = fileList.value.indexOf(file);
    // const newFileList = fileList.value.slice();
    // newFileList.splice(index, 1);
    fileList.value = [];

    formData.name = ''
  };
  
 function cancelUpload() {
        if(source.value){
            source.value.cancel()
          }
 }
      

 <div class="download"><span @click="downloadFile">下载</span></div>
 
 
 function downloadFile() {
    const res1 = await getDownloadSignedAddress({ path: queryUpgradePackageRes.value.configLink, isOtaModule: true });
    console.log('log->res', res1.result);

    
    const link = document.createElement('a');
    // link.style.display = 'none';
    link.href = res1.result;
   
    // document.body.appendChild(link);
    link.click();
    // document.body.removeChild(link);
}