uniapp:图片、视频、音频文件上传

在这里插入图片描述

const maxCount = fileMap.imageUrls ? fileMap.maxSize - fileMap.imageUrls.length : fileMap.maxSize; // 限制最多可以选择的图片张数
uni.chooseMedia({
  count: maxCount,
  mediaType: ["image"],
  sizeType: ["compressed"],
  camera: "back",
  success: (res) => {
    const tempFiles = res.tempFiles;
    const accept = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"];
    let fail = false;
    tempFiles.forEach((item, index) => {
      console.log("压缩之后的图片大小", item.size)
      const extension = item.tempFilePath
        .split(".")[1];
      if (accept.indexOf(extension) === -1 || Number(item.size) >
        Number(
          5242880) ||
        fileMap.imageUrls.length >= fileMap.maxSize
      ) {
        fail = true;
      } else {
        this.uploadFile(item, fileMap);
      }
    });
    if (fail) {
      uni.showToast({
        title: `仅支持照片文件,最大支持5M,最多传${fileMap.maxSize}`,
        icon: "none",
        duration: 3000,
      });
    }
  },
});

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<audio
              style="text-align: left"
              :src="item.audio"
              poster="https://www.hfkxjf.com/lydev/fins-appzhany/base/downloadFile?fastDfsUrl=iNRJ4KmH0Qt9DoURdo2DQNUv1FhGdNRTO6dpOlHF2YQrOjG/1f7yE5uBu2HU/1a38E2J4gZ/7c2lTeVRj+ItrHJpXvex7D1P54m3YCkFTzw="
              :name="'音频' + index"
              :author="'作者' + index"
              :action="{ method: 'pause' }"
              controls
            ></audio>

相关推荐

  1. uniapp实现文件图片选择功能实现

    2024-04-23 08:56:01       13 阅读
  2. uni-app音频图片步骤

    2024-04-23 08:56:01       31 阅读
  3. uniapp APP 文件

    2024-04-23 08:56:01       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-23 08:56:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-23 08:56:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-23 08:56:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-23 08:56:01       20 阅读

热门阅读

  1. milvus 相似度检索的底层原理

    2024-04-23 08:56:01       13 阅读
  2. 【LeetCode热题100】【图论】腐烂的橘子

    2024-04-23 08:56:01       12 阅读
  3. SAM-Lighting 项目排坑

    2024-04-23 08:56:01       17 阅读
  4. 使用 Monaco Editor 开发 SQL 编辑器

    2024-04-23 08:56:01       14 阅读
  5. 什么是防火墙?

    2024-04-23 08:56:01       12 阅读
  6. asp.net get请求base64解密报错问题

    2024-04-23 08:56:01       10 阅读
  7. uniapp读取(获取)缓存中的对象值(微信小程序)

    2024-04-23 08:56:01       11 阅读
  8. open-webui与ollama的部署最后完整之命令

    2024-04-23 08:56:01       16 阅读
  9. 详解QString类的使用和注意事项

    2024-04-23 08:56:01       21 阅读