• WEB端前端直傳

參考文檔：web前端直傳并設置上傳回調

封裝oss-upload.ts

// 圖片上傳
import { uploadToken } from '@/api/uploadFile.js' // 獲取oss token接口// 定義 OSS 信息類型
interface OssInfo {policy: string;signature: string;x_oss_credential: string;x_oss_date: string;dir: string;security_token: string;callback: string;host: string;data?: {filename?: string;url?: string;};
}// 定義 uploadToken 返回數據類型
interface UploadTokenResponse {status_code: number;data: OssInfo;
}let ossInfo: OssInfo | null = null// 定義文件類型
type FileWithMetadata = File & {base64?: string;width?: number;height?: number;url?: string;fileType?: string;raw?: File;thumbdata?: string;
};/*** 文件上傳數組* 過濾已上傳文件* @param {FileWithMetadata[]} files 要上傳的文件數組* @returns {Promise<{ sucArr: FileWithMetadata[]; failArr: FileWithMetadata[] }>} 包含上傳成功和失敗文件的Promise*/
export async function fileUpload(files: FileWithMetadata[]): Promise<{ sucArr: FileWithMetadata[]; failArr: FileWithMetadata[] }> {const sucArr: FileWithMetadata[] = []const failArr: FileWithMetadata[] = []return new Promise((resolve) => {const result = files.reduce((accumulatorPromise: Promise<void>, next: FileWithMetadata) => {return accumulatorPromise.then(() => { // 上一個接口執行完畢再執行下一個if (!next.url || !next.url.includes(import.meta.env.VITE_APP_UPLOAD_API)) {return uploadItemHandle((next.fileType === 'file' && next.raw) ? next.raw : next).then((res) => {sucArr.push(res)}).catch((res) => {failArr.push(res)})} else {sucArr.push(next)}})}, Promise.resolve())result.then(() => {console.log('All Promises Resolved', { sucArr, failArr })resolve({ sucArr, failArr })})})
}/*** 文件處理* @param {FileWithMetadata} file 要上傳的文件* @returns {Promise<FileWithMetadata>} 包含上傳成功文件的Promise*/
function uploadItemHandle(file: FileWithMetadata): Promise<FileWithMetadata> {return new Promise(async(resolve, reject) => {if (!ossInfo) { // 減少調用接口次數const data = await uploadToken() as UploadTokenResponseif (Number(data.status_code) === 200) {ossInfo = data.data}}if (!ossInfo) return reject(file)const formData = new FormData()formData.append('success_action_status', '200')formData.append('policy', ossInfo.policy)formData.append('x-oss-signature', ossInfo.signature)formData.append('x-oss-signature-version', 'OSS4-HMAC-SHA256')formData.append('x-oss-credential', ossInfo.x_oss_credential)formData.append('x-oss-date', ossInfo.x_oss_date)formData.append('key', ossInfo.dir + file.name) // 文件名formData.append('x-oss-security-token', ossInfo.security_token)formData.append('callback', ossInfo.callback) // 添加回調參數formData.append('file', file) // file 必須為最后一個表單域try {const response = await fetch(ossInfo.host, { method: 'POST', body: formData })if (!response.ok) throw new Error(`請求失敗: ${response.status}`)const imgData = await response.json()if (imgData.status === 200 && imgData.data) {file.thumbdata = imgData.data.filename || ''file.url = imgData.data.url || ''resolve(file)} else {console.error(JSON.stringify(imgData))reject(file)}} catch (error) {console.error(error)reject(file)}})
}

調用：

await fileUpload(list).then(arr => {if (arr.failArr.length === 0) {console.log('上傳數據返回：',arr)} else {ElMessage({ message: `有文件上傳失敗請重新上傳！`, type: 'error', duration: 2 * 1000 })}
}).catch(() => {return { sucArr: [] }
})

微信小程序端
參考文檔：微信小程序端前端直傳
ossUpload.js

(function () {const {request} = require('./request')let ossInfo = nullfunction uploadFile(filePath, success, fail, options, progress, cancelTask) {let successResult = []let failResult = []const result = filePath.reduce((accumulatorPromise, next) => {return accumulatorPromise.then(() => { // 上一個接口執行完畢再執行下一個return uploadItem(next).then((res => {successResult = successResult.concat(res)})).catch(res => {failResult = failResult.concat(res)})})}, Promise.resolve())result.then(e => {if (failResult.length === 0) success(successResult)else fail(successResult)})}// 正式上傳的前置方法，做預處理function uploadItem(file) {return new Promise(async (resolve, reject) => {if (!ossInfo) {const data = await getOssToken()if (Number(data.status_code) === 200) {ossInfo = data.dataossInfo = data}}console.log('file',file)if (!ossInfo) return reject(file)// 上傳參數const formData = {key:file.tempFilePath.split('/').pop(), //上傳文件名稱policy: ossInfo.policy, //表單域'x-oss-signature-version': ossInfo.xOssSignatureVersion, //指定簽名的版本和算法'x-oss-credential': ossInfo.xOssCredential, //指明派生密鑰的參數集'x-oss-date': ossInfo.xOssDate, //請求的時間'x-oss-signature': ossInfo.xOssSignature, //簽名認證描述信息'x-oss-security-token': ossInfo.xOssSecurityToken, //安全令牌success_action_status: ossInfo.success_action_status //上傳成功后響應狀態碼};// 發送請求上傳文件 wx.uploadFile({// Bucket域名 請替換為目標Bucket域名url: ossInfo.base_url, // 此域名僅作示例，實際Bucket域名，請替換為您的目標Bucket域名。filePath: file.tempFilePath,name: 'file', //固定值為fileformData: formData,success(res) {console.log('上傳響應:', res);if (res.statusCode === 200) {resolve(res.data); // 上傳成功} else {console.error('上傳失敗響應:', res);reject(res); // 上傳失敗，返回響應}},fail(err) {console.error('上傳失敗:', err); // 輸出錯誤信息reject(err); // 調用回調處理錯誤}});})}// 獲取阿里云tokenfunction getOssToken() {return new Promise((resolve, reject) => {const data = {url: 'api/sts-token', // 獲取oss token接口method: 'post'}request(data, true, false, '操作中...', 2000).then((res) => {resolve(res)}).catch((err) => {reject('token獲取失敗' + err)})})}module.exports = {uploadFile}
})();

使用：
index.js

const {uploadFile} = require('../../utils/ossUpload')Component({data: {image: [],},pageLifetimes: {show() {if (typeof this.getTabBar === 'function') {this.getTabBar((tabBar) => {tabBar.setData({selected: 0})})}}},methods: {onUpload() {uploadFile(this.data.image, (res) => {console.log('成功', res)this.onSubmit()}, (err) => {console.log('失敗', err)})},onSubmit() {console.log('好啦')},uploadImg() {wx.chooseMedia({count: 9,mediaType: ['image', 'video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success: (res) => {console.log(res.tempFiles)this.setData({image: res.tempFiles})}})}}
})

index.wxml:

<button bind:tap="uploadImg">上傳</button>
<image wx:for="{{image}}" src="{{item.tempFilePath}}" mode="" />
<button bind:tap="onUpload">提交</button>