小程序上传头像解析

• 背景：小程序个人中心，修改个人信息上传头像。
• 用到的方法
  1. uni.chooseImage。其中关键的一步上传const uploadTask = uni.uploadFile(uploadConfig);
  2. uni.uploadFile
• 需要注意。上传成功后获取的路径http://temp/.....无法访问。但对接uni.uploadFile文件后可以成功上传文件到自己定义的文件上传接口ap*****t/sys/upload，以及可用通过代理接口进行回显http://localhost:8068/s******ss/proxy。这连个地方可以再下面代码区域搜索到
  3. 下方提供的代码路径写死了，不规范，可以通过获取全局的访问路径进行配置。

// 执行上传
const uploadTask = uni.uploadFile(uploadConfig);

<!-- 头像上传区域 -->
<view class="avatar-section"><view class="avatar-container" @click="chooseAvatar"><imageclass="avatar":src="formData.avatar || defaultAvatar"mode="aspectFill"@error="handleAvatarError"></image><view class="avatar-overlay"><u-icon name="camera" size="24" color="#fff"></u-icon><text class="avatar-text">点击更换头像</text></view></view>
</view>
...
methods: {/*** 选择头像。这里使用了 uni.chooseImage* @description 调用系统相册或相机选择头像*/chooseAvatar() {console.log('chooseAvatar.token', this.getToken());uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;this.uploadAvatar(tempFilePaths[0]);}});},/*** 上传头像* @description 使用OSS文件代理接口上传用户选择的头像图片* @param {string} filePath - 图片文件路径*/async uploadAvatar(filePath) {uni.showLoading({title: '上传中...'});try {// 使用OSS文件代理接口上传const uploadResult = await this.uploadToOSS(filePath);console.log('uploadResult', uploadResult);if (uploadResult.success) {// 使用OSS代理URL作为头像地址this.formData.avatar = uploadResult.proxyUrl;// 给新增的bucket和object字段赋值this.formData.bucket = uploadResult.bucket;this.formData.object = uploadResult.object;this.formData.ossData = {bucket: uploadResult.bucket,object: uploadResult.object,ossId: uploadResult.ossId};uni.hideLoading();uni.showToast({title: '头像上传成功',icon: 'success'});} else {throw new Error(uploadResult.message || '上传失败');}} catch (error) {console.error('上传头像失败:', error);uni.hideLoading();uni.showToast({title: '上传失败，请稍后重试',icon: 'none'});}},/*** 文件上传到OSS* @description 使用uni.uploadFile上传文件到OSS存储* @param {string} filePath - 文件路径* @param {Object} options - 上传选项* @returns {Promise<Object>} 上传结果*/async uploadToOSS(filePath, options = {}) {console.log('uploadToOSS', filePath);return new Promise((resolve, reject) => {console.log('uploadToOSS2', filePath);// 显示上传进度if (options.showProgress !== false) {uni.showLoading({title: '上传中...'});}// 构建上传参数const uploadConfig = {url: 'http://localhost:8068/a*****t/sys/upload', // OSS上传接口filePath: filePath, // 文件路径name: 'file', // 文件字段名header: {Authorization: 'Bearer ' + this.getToken()},timeout: options.timeout || 60000, // 超时时间，默认60秒formData: options.formData || {}, // 额外的表单数据success: (res) => {try {const result = JSON.parse(res.data);console.log('uploadToOSS3', result);if (result.code === 200) {const { fileName, url, ossId, bucket, object } = result.data;// 构建OSS代理URLconst proxyUrl = `http://localhost:8068/s******ss/proxy?bucket=${bucket}&object=${encodeURIComponent(object)}`;resolve({success: true,fileName,url,proxyUrl,ossId,bucket,object,statusCode: res.statusCode});} else {resolve({success: false,message: result.msg || '上传失败',statusCode: res.statusCode});}} catch (error) {resolve({success: false,message: '解析响应失败',error: error.message});}},fail: (error) => {resolve({success: false,message: '网络请求失败',error: error.errMsg || error.message});},complete: () => {if (options.showProgress !== false) {uni.hideLoading();}}};console.log('uploadToOSS3.token', this.getToken());// 执行上传const uploadTask = uni.uploadFile(uploadConfig);// 监听上传进度if (options.onProgress) {uploadTask.onProgressUpdate((res) => {options.onProgress({progress: res.progress,totalBytesSent: res.totalBytesSent,totalBytesExpectedToSend: res.totalBytesExpectedToSend});});}// 返回uploadTask以便外部控制if (options.returnTask) {resolve({uploadTask,promise: new Promise((innerResolve, innerReject) => {uploadConfig.success = (res) => {try {const result = JSON.parse(res.data);if (result.code === 200) {const { fileName, url, ossId, bucket, object } = result.data;const proxyUrl = `/system/oss/proxy?bucket=${bucket}&object=${encodeURIComponent(object)}`;innerResolve({success: true,fileName,url,proxyUrl,ossId,bucket,object,statusCode: res.statusCode});} else {innerReject(new Error(result.msg || '上传失败'));}} catch (error) {innerReject(new Error('解析响应失败'));}};uploadConfig.fail = (error) => {innerReject(new Error(error.errMsg || '网络请求失败'));};})});}});}
}