一单张图片存储之后集中使用(还待修改仅供参考)
注意 : 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);
}
});
})
}
如遇到:支付宝小程序发起支付生成订单提交图片问题,记得留言讨论