支付宝小程序手机相册上传多个图片踩坑

一单张图片存储之后集中使用(还待修改仅供参考)

注意 : img图片必须使用支付宝小程序官方文档推荐按钮才能渲染

 <view class="page-section-demo btn" onTap="showUploadFile" a:for="{
    
    {img}}" a:for-index="idx" a:for-item="item">
     <image class="image" data-idx="{
    
    {idx}}" mode="{
    
    {item.mode}}" src="{
    
    {item}}" onError="imageError" onLoad="imageLoad" />
 </view>

//引入url文件
impor {
    
    API} from "api文件地址";
Page({
    
    
  data: {
    
    
  imgId:[],//图片id集合,由后台服务生成
  img:['../../components/img/add.png']//声明一个数组用来接收图片地址，默认有一张添加图片图片![默认图片样式](https://img-blog.csdnimg.cn/20210226172147254.png)

  }
showUploadFile() {
    
    //上传图片到手机端
let that =this;
let imgId= this.data.imgId;
let img=this.data.img;
my.chooseImage({
    
    
          count: 1,//最多上传图片个数（当同时选中多张时候，调不动接口，只能选一张）
          success: res => {
    
    
            if (res.apFilePaths[0] == undefined) {
    
    
              my.alert({
    
    
                title: "不能传空图片",
              });
            } else {
    
    
              const path = res.apFilePaths[0];
              
              //发送请求存储图片生成图片id
              addUpload(path).then(res=>{
    
    
                  imgId.splice(0, 0, JSON.parse(res.data).data[0]);
                  img.splice(this.data.img.lengt - 1, 0, path)
                   this.setData({
    
    
                       imgId,
                        img,
                    })
               })
               
          },
        });
 })

//API文件
export function addUpload(path) {
    
    

    return new Promise((resolve, reject) => {
    
    
        my.uploadFile({
    
    
            url: `${
      
      url}`,//服务地址
            filePath: path,
            fileName: 'files',//字段名
            fileType: 'image',
            hideLoading: false,
            formData: {
    
     },//除了path以外其他参数
            success: (res) => {
    
    
                resolve(res);
            },
            fail: (err) => {
    
    
                reject(err);
            }
        });
    })
}

如遇到:支付宝小程序发起支付生成订单提交图片问题，记得留言讨论