<view class="upload-file-contarner" @click="handleUploadFile">
+
</view>
maxFile: 3,
types: ".png,.jpg,.jpeg"
handleUploadFile() {
const types = this.types.split(",");
//由于平台提供的方法只兼容app和H5,所以微信小程序使用该方法,唤起微信聊天框选择文件
wx.chooseMessageFile({
count: this.maxFile, //默认100
extension: types,
success: async res => {
const files = res.tempFiles;
var suffix = res.tempFiles[0].name.substring(
res.tempFiles[0].name.lastIndexOf(".")
);
if (types.includes(suffix)) {
const processResultFiles = async () => {
const promise = files.map(async v => {
return await this.asyncResultFiles(v);
});
return await Promise.all(promise);
};
//最终我们需要的接口返回的数据集合
const processArr = await processResultFiles();
this.$emit("handleUploadFile", processArr);
} else {
uni.showToast({
title: "请上传图片类型",
icon: "none"
});
}
},
fail: err => {
// 用户取消选择文件或选择文件失败的回调函数
throw err;
}
});
},
//异步配合Promise.all可以一次性拿到最终的结果
asyncResultFiles(item) {
return new Promise(async resolve => {
const result = await this.uploadFilePromise(item.path);
const res = JSON.parse(result);
console.log(res.data);
if (res.code === "200") {
resolve(res.data);
}
});
},
//异步返回接口的结果
uploadFilePromise(filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${baseUrl}User/User/uploadImage`,
filePath: filePath,
name: "file",
success: res => {
resolve(res.data);
},
fail: err => {
reject(err);
}
});
});
}
兼容app和H5,所以微信小程序使用该方法,唤起微信聊天框选择上传文件
于 2024-04-16 16:32:58 首次发布