uniapp微信小程序-上传文件（支持图片和其他文件等），一次性获得最终返回值-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序-上传文件（支持图片和其他文件等），一次性获得最终返回值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp-微信小程序-上传文件

<!-- 上传文件（自定义文件类型） -->
<template>
  <view class="upload-file-contarner" @click="handleUploadFile"> + </view>
</template>

<script>
export default {
  components: {},
  props: {
    //接受的附件格式
    types: {
      type: String,
      default: () => '.png,.jpg,.jpeg,.pdf,.doc,.docx,.xls,.xlsx',
    },
    //最多上传几个文件
    maxFile: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleUploadFile() {
      const types = this.types.split(',');
      //由于平台提供的方法只兼容app和H5，所以微信小程序使用该方法，唤起微信聊天框选择文件
      wx.chooseMessageFile({
        count: this.maxFile, //默认100
        extension: types,
        success: async (res) => {
          const files = res.tempFiles;
          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);
        },
        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);
        if (res.code === '00000') {
          resolve(res.data);
        }
      });
    },
    //异步返回接口的结果
    uploadFilePromise(filePath) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          // #ifndef H5
          url: `${process.env.VUE_APP_BACK_URL}/nqi/file/uploadTopfs`,
          // #endif
          // #ifdef H5
          url: `${process.env.VUE_APP_BASE_URL}/nqi/file/uploadTopfs`,
          // #endif
          filePath: filePath,
          name: 'file',
          header: {
            'top-token': uni.getStorageSync('top-token'),
          },
          success: (res) => {
            resolve(res.data);
          },
          fail: (err) => {
            reject(err);
          },
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.upload-file-contarner {
  cursor: pointer;
  width: 100%;
  height: 80rpx;
  font-size: 50rpx;
  text-align: center;
  line-height: 80rpx;
  border: 1px solid $u-light-color;
  color: $u-light-color;
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}
</style>