uniapp 使用 XMLHttpRequest发送二进制上传文件 可使用预上传接口上传到华为obs

<template> <button @click="changeMessage">选择文件</button> <view v-show="false" :path="path" :change:path="requestModule.uploadOBS"></view> </template> <script setup> import { ref } from 'vue' import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() // 把回调挂到实例上，renderjs 就能通过 callMethod 调到 proxy.$onRenderData = (data) => { console.error('str:', data) } const path = ref(null) const changeMessage = () => { uni.chooseImage({ count: 1, // 最多选择数量 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机 success: async (res) => { // tempFilePath 可以作为 img 标签的 src 属性显示图片 const tempFilePaths = res.tempFilePaths path.value = tempFilePaths[0]; }, fail: (err) => { console.error('选择图片失败:', err) } }) } </script> <script> // 专门给 renderjs 回调用 ownerVm.callMethod('onRenderData', "999999") 就能调到 /* export default { methods: { onRenderData(data) { console.error('str:', data) } } } */ </script> <script module="requestModule" lang="renderjs"> export default { methods: { /* 1. 逻辑层 → renderjs */ uploadOBS(newVal, oldVal, ownerVm, vm) { console.error('path:', newVal) this.getFileAsArrayBuffer2(newVal).then(res => { console.error('arrayBuffer:', res) return this.uploadArrayBuffer(res,'https://jszj-dev.obs.cn-east-3.myhuaweicloud.com/2011725287372374017/jszj_lp_merchant_apply_for_application_materials_file_id/20260116/1762482093185_1768566856106.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260116T123416Z&X-Amz-SignedHeaders=host&X-Amz-Credential=HPUAACHPJ15SJKPZGOAP%2F20260116%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=86400&X-Amz-Signature=29eb09d67a7bf73afb199e75148c57d73d13d65146fe6bd351b479cc0ebd66d1','image/jpeg'); }).then(res => { console.error('upload:', res) }).catch(err => { }) //调用vue2方法 //ownerVm.callMethod('onRenderData', "999999") //调用vue3方法 ownerVm.callMethod('$onRenderData', "999999") }, getFileAsArrayBuffer2(filePath) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('GET', filePath, true) xhr.responseType = 'arraybuffer' xhr.onload = function() { if (xhr.status === 200) { resolve(xhr.response) } else { reject(new Error('Failed to load file')) } } xhr.onerror = function() { reject(new Error('Network error')) } xhr.send() }) }, uploadArrayBuffer(arrayBuffer, uploadUrl, fileType = 'application/octet-stream') { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); /* 1. 打开连接 */ xhr.open('PUT', uploadUrl, true); /* 2. 设置请求头 */ xhr.setRequestHeader('Content-Type', fileType); /* 3. 响应类型（按需要） */ xhr.responseType = 'arraybuffer'; /* 4. 上传进度 */ xhr.upload.onprogress = function(e) { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; console.log('上传进度:', percent.toFixed(2) + '%'); } }; /* 5. 成功/失败 */ xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); // 服务端返回的 ArrayBuffer } else { reject(new Error(`上传失败 ${xhr.status}`)); } }; xhr.onerror = () => reject(new Error('网络错误')); /* 6. 发送二进制 */ xhr.send(arrayBuffer); }); } } } </script> <style> </style>