文件上传

• 文件上传分为 base64上传 和 oss上传;
• 根据实际情况选择上述2种方式，一般大文件使用oss上传;

版本说明

时间	修改人	备注
2025-10-20	YG	补充xcx、微信h5多图上传文档

一、base64 上传

• 该方式适用于小文件上传，项目中一般用于较小的图片上传
• 公共上传接口：comm/upload/index

使用示例：

1. 引入上传接口

import {uploadFile} from '/src/js/demo/demo.js';

2. 调用

//base64上传
function upLoadImg(arrImg) {
  return new Promise(async (resolve) => {
    let arrUrl = [];
    for (let i = 0; i < arrImg.length; i++) {
      let it = arrImg[i];
      if (it.short_line) {
        //如果是回显的图片不做上传
        arrUrl.push(it.short_line);
      } else {
        let base64 = await imageBaseUrl(it.url);
        let data = await uploadFile({
          base64img: base64,
          path: "digi_demo",
        });
        arrUrl.push(data.result.filename);
      }
      if (arrUrl.length == arrImg.length) {
        resolve(arrUrl);
      }
    }
  });
}

//图片转化base64
function imageBaseUrl(url) {
  return new Promise((resolve) => {
    wx.getFileSystemManager().readFile({
      filePath: url,
      encoding: "base64",
      success: function (data) {
        let baseUrl = `data:image/png;base64,${data.data}`;
        resolve(baseUrl);
      },
    });
  });
}

注意：

1. 示例中的upLoadImg方法，arrImg是vant-upload绑定的值；
2. 示例中的upLoadImg方法，判断回显的字段short_line是数据回显自己添加的；

二、OSS 上传

• 该方式适用于大文件上传

以上传图片为例

使用示例：

1. 引入方法

import useOss from "/src/libs/oss/useOss/useOss.1.0.0.js";

2. 调用

//oss上传
function upLoadImgOss(arrFile) {
  return new Promise(async (resolve) => {
    let arrUrl = [];
    for (let i = 0; i < arrFile.length; i++) {
      let it = arrFile[i];
      if (it.short_line) {
        arrUrl.push(it.short_line);
      } else {
        let res = await useOss.ossUpload({
          url: it.url,
          onProgress: (p) => {
            console.log(p);
          },
        });
        console.log(res, "res");
        arrUrl.push(res.filePath);
      }

      if (arrUrl.length == arrFile.length) {
        resolve(arrUrl);
      }
    }
  });
}

注意：

1. 示例中的upLoadImgOss方法，arrFile是vant-upload绑定的值；
2. 示例中的upLoadImgOss方法，判断回显的字段short_line是数据回显自己添加的；

useOss.1.0.0.js 说明：

useOss.ossUpload

• 需要有获取 oss 配置接口

option

参数	说明	类型	默认值
url	文件 url，本地路径	String	必填
name	文件名称	String	'file*' + 当前时间戳 + '*' + 8 位随机字符串
size	文件大小，文件超出该大小无法上传，单位：MB	Number	50
onProgress	监听上传进度回调	Function	-

三、多图上传

以下是一个更完整的xcx/微信h5多平台兼容版本：
接口：comm/upload/multi

import { convertImageToBase64 } from '@/utils/imageTools'; // H5/APP 端使用的 base64 转换工具

// 上传图片函数
const uploadImg = async (arrPhoto) => {
  if (arrPhoto.length === 0) {
    return { result: {} };
  }
  
  let imgBase64 = {};
  let imgName = [];
  arrPhoto.forEach((item, index) => {
    imgName.push('img' + index);
    imgBase64['img' + index] = item;
  });
  const requestData = { ...imgBase64, fields: imgName.join(','), is_app: 1 };
  // 调用实际的上传接口
  const resultData = await yourUploadService.commUpload(requestData);
  return resultData;
};

// 选择图片并转换为 base64
const getPhoto = (arrPhoto, maxCount = 4) => {
    uni.chooseImage({
      count: maxCount - arrPhoto.length,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: ({ tempFilePaths, tempFiles }) => {
        if (arrPhoto.length + tempFilePaths.length > maxCount) {
          uni.showToast({
            title: `最多只能上传${maxCount}张图片`,
            icon: "none",
          });
          reject(new Error(`最多只能上传${maxCount}张图片`));
          return;
        }
        
        // 微信小程序平台处理
        // #ifdef MP-WEIXIN
        tempFilePaths.forEach(item => {
          const imgBase64 = wx.getFileSystemManager().readFileSync(item, 'base64');
          arrPhoto.push(`data:image/png;base64,${imgBase64}`);
        });
        // #endif
        
        // H5 或 App 平台处理
        // #ifdef H5 || APP-PLUS
        tempFilePaths.forEach(async (item) => {
            try {
                const base64 = await convertImageToBase64(item);
                arrPhoto.value.push(`data:image/png;base64,${base64}`);
            } catch (error) {
                console.error('图片转换失败:', error);
                // 如果转换失败，仍然添加原路径
                arrPhoto.value.push(item);
            }
        });
        // #endif
      },
      fail: (error) => {
        console.error('选择图片失败:', error);
      },
    });
};

// 提交表单（包含图片上传）
const submitForm = async (formData, arrPhoto) => {
  uni.showLoading({
    title: '提交中...',
    mask: true,
  });
  
  try {
    // 1. 先上传图片
    let uploadedFiles = [];
    if (arrPhoto?.length) {
      const resultImg = await uploadImg(arrPhoto);
      console.log('上传图片结果:', resultImg);
      
      // 处理上传结果
      for (let key in resultImg.data?.result) {
        if (key !== 'is_wechat') {
          uploadedFiles.push(resultImg.data?.result[key].filename);
        }
      }
    }
    
    // 2. 准备表单数据（包含图片路径）
    const submitData = {
      ...formData,
      images: uploadedFiles.join(',') // 多个图片用逗号分隔
    };
    
    // 3. 提交表单数据
    const result = await yourSubmitService.submitData(submitData);
    
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000
    });
    
    return result;
  } catch (error) {
    uni.hideLoading();
    console.error('提交失败:', error);
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none'
    });
    throw error;
  }
};