uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件

uniapp文件上传组件，支持图片、视频上传

html部分：

<template>
  <view class="annex-wrap">
    <view class="annex-box">
      <view class="lab">上传附件</view>
      <view class="file-list">
        <view
          class="file-list-item"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <view class="file-list-item-inner">
            <!--图片-->
            <image
              :src="item.tempFilePath"
              class="upload-temp-img"
              v-if="item.fileType === '1'"
              mode="aspectFill"
              @click="toPreview(item)"
            ></image>
            <!--视频-->
            <view v-if="item.fileType === '2'" class="file-area">
              <view @click="toPreview(item)">
                <u-icon
                  name="play-circle-fill"
                  color="#1890FF"
                  size="80"
                ></u-icon>
                <view class="name">{{ item.fileName }}</view>
              </view>
            </view>
            <view @click="removeFile(index)" class="close-btn">
              <u-icon name="close" size="20"></u-icon>
            </view>
          </view>
        </view>
        <view class="file-list-item" @click="toShowChooseSheet()">
          <view class="file-list-item-inner upload-btn">
            <view>
              <u-icon name="plus" color="#929AA5" size="36"></u-icon>
              <view>{{ dataList.length }}/{{ maxFilesNum }}</view>
            </view>
          </view>
        </view>
        <u-empty
          text="暂无数据"
          mode="data"
          v-if="dataList.length === 0"
        ></u-empty>
      </view>
    </view>
    <u-action-sheet
      :list="uploadTypeList"
      v-model="showUploadTypeSheet"
      :tips="uploadTypeTips"
      :border-radius="20"
      @click="chooseUploadType"
    ></u-action-sheet>
    <u-popup
      v-model="showPreview"
      border-radius="14"
      mode="center"
      width="95%"
      closeable
      @close="closePreview"
    >
      <view class="preview-content">
        <image
          :src="previewItem.url"
          mode="aspectFit"
          style="width: 100%; height: 100%"
          v-if="previewItem.fileType === '1'"
        ></image>
        <video
          :src="previewItem.url"
          id="preview-video"
          :autoplay="false"
          controls
          :show-progress="true"
          :show-center-play-btn="true"
          v-if="previewItem.fileType === '2'"
        ></video>
      </view>
    </u-popup>
  </view>
</template>

css：

<style lang="scss" scoped>
.annex-wrap {
  background: #f5f7fa;

  .err-color {
    color: #f00;
  }

  .border-dashed {
    margin: 24rpx 0;
    border: 1px dashed #eff0f2;
  }

  .icon-arrow {
    margin-left: 12rpx;
  }

  .annex-box {
    background: #ffffff;
    border-radius: 10px;
    margin-top: 24rpx;
    color: #475569;
    margin-top: 24rpx;
    padding: 24rpx 34rpx;
    position: relative;
    overflow: hidden;
    position: relative;
    line-height: 1.6;

    .lab {
      font-size: 28rpx;
      color: #475569;
      padding: 10rpx;
    }

    &.select-box {
      padding: 0 34rpx;

      .u-form-item {
        color: #475569;
        padding: 16rpx 0;
      }
    }

    .mt-10 {
      margin-top: 10rpx;
    }

    .top {
      position: relative;

      .left {
        margin-right: 150rpx;
      }

      .title {
        font-size: 34rpx;
        color: #303133;
        font-weight: 550;
      }

      .desc {
        color: #929aa5;
        font-size: 24rpx;
      }

      .user-tag {
        margin-left: 24rpx;
        background-color: #f4f9ff;
        color: #1890ff;
        font-size: 22rpx;
        display: inline-block;
        border-radius: 6rpx;
        padding: 4rpx 20rpx;

        .text {
          margin-left: 10rpx;
        }
      }

      .right-icon {
        position: absolute;
        right: 0rpx;
        top: -20rpx;

        .icon {
          width: 170rpx;
          height: 170rpx;
        }
      }

      .result-items {
        overflow: hidden;

        .result-item {
          width: 33%;
          float: left;
          padding: 12rpx 0;
          text-align: center;
          position: relative;

          .red {
            color: #ff7676;
          }
        }

        .result-item:after {
          height: 60rpx;
          width: 1px;
          border-left: 1px solid #eff0f2;
          content: "";
          display: inline-block;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        .result-item:nth-child(3n):after {
          display: none;
        }

        .name {
          color: #929aa5;
          font-size: 24rpx;
        }

        .num {
          color: #303133;
          font-size: 30rpx;
        }
      }
    }
  }

  .file-list-item {
    width: 31%;
    padding: 15.5% 0 15.5% 0;
    margin-right: 3.5%;
    position: relative;
    display: inline-block;
    overflow: hidden;

    &-inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;

      .upload-temp-img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10rpx;
      }
    }

    .upload-btn {
      border: 2px dashed #e2e8f0;
      border-radius: 10rpx;
      background: #fff;
      text-align: center;
      font-size: 26rpx;
      color: #929aa5;
      cursor: pointer;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }

    .file-area {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(77, 151, 255, 0.05);
      text-align: center;
      width: 100%;
      border-radius: 10rpx;

      .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 160rpx;
      }

      .icon-file {
        width: 60rpx;
        height: 74rpx;
      }

      video {
        width: 100%;
        height: 100%;
      }
    }

    .close-btn {
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(71, 85, 105, 0.3);
      border-radius: 0px 10rpx 0px 10rpx;
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      cursor: pointer;
      text-align: center;
      color: #fff;
      z-index: 9;
    }
  }
}

.preview-content {
  width: 100%;
  height: 90vh;
  padding-top: 80rpx;
  padding-bottom: 20rpx;
  text-align: center;
  display: flex;
  align-items: center;

  video {
    width: 100%;
    height: 100%;
  }
}
</style>

 js：

  data() {
    return {
      showPreview: false,
      previewItem: {
        url: "",
        fileType: "",
      },
      dataList: [],
      uploadTypeList: [
        {
          text: "图片",
        },
        {
          text: "视频",
        },
      ],
      uploadTypeTips: {
        text: "请选择上传文件类型",
        color: "#909399",
        fontSize: 32,
      },
      showUploadTypeSheet: false,
      maxFilesNum: 20, //最大上传数
    };
  },
  methods: {
    // 获取附件列表-查看或编辑时候用
    getFileList() {
      let data = {
        id: id,
      };
      getFileList(data).then((res) => {
        if (res.code === 200) {
          this.dataList = res.result;
          this.dataList.forEach((item) => {
            item,
              (item.tempFilePath = `域名/file/downloadFile?filePath=${item.filePath}`);
            //tempFilePath：文件的临时地址，或者拼一个获取文件临时地址的接口，临时文件地址才可以预览
          });
        }
      });
    },
    // 打开预览
    toPreview(item) {
      if (item.fileType === "1") {
        this.showPreview = true;
        // 添加延时加载 避免popup不显示
        setTimeout(() => {
          this.previewItem = {
            url: item.tempFilePath,
            fileType: item.fileType,
          };
        }, 500);
      } else if (item.fileType === "2") {
        this.showPreview = true;
        this.downloadVideo(item.tempFilePath);
      }
    },
    // 关闭预览
    closePreview() {
      this.previewItem = {
        url: "",
        fileType: "",
      };
    },
    // 移除文件
    removeFile(index) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除此项吗？",
        success: function (res) {
          if (res.confirm) {
            that.dataList.splice(index, 1);
          }
        },
      });
    },
    // 上传图片
    chooseImage() {
      let that = this;
      uni.chooseImage({
        count: this.maxFilesNum - this.dataList.length, //默认100
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          let imgArr = [];
          //   图片批量上传
          for (let i = 0; i < tempFilePaths.length; i++) {
            let obj = new Object();
            obj.name = `files` + i;
            obj.uri = tempFilePaths[i];
            imgArr.push(obj);
            obj = null;
          }
          uni.showLoading();
          uni.uploadFile({
			//url：上传文件接口，返回文件名、文件类型、文件大小、文件地址等
            url: `域名/file/uploadFile`,
            files: imgArr,
            success: (uploadRes) => {
              let data = JSON.parse(uploadRes.data);
              if (data.code === 200) {
                (data.result || []).forEach((item, index) => {
                  that.dataList.push({
                    fileType: "1",//1图片，2视频
                    fileName: item.fileName,
                    filePath: item.filePath,
                    fileSize: item.fileSize,
                    fileSuffix: item.fileSuffix,
                    tempFilePath: tempFilePaths[index],
                  });
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: "上传失败",
                });
              }
            },
            complete: () => {
              uni.hideLoading();
            },
          });
        },
      });
    },
    // 上传视频
    chooseVideo() {
      let that = this;
      uni.chooseVideo({
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePath = res.tempFilePath;
          uni.showLoading();

          uni.uploadFile({
            //url：上传文件接口，返回文件名、文件类型、文件大小、文件地址等
            url: `域名/file/uploadFile`,
            filePath: tempFilePath,
            name: "file",
            success: (uploadRes) => {
              let data = JSON.parse(uploadRes.data);
              if (data.code === 200) {
                that.dataList.push({
                  fileType: "2",
                  fileName: data.result.fileName,
                  filePath: data.result.filePath,
                  fileSize: data.result.fileSize,
                  fileSuffix: data.result.fileSuffix,
                  tempFilePath: `域名/file/downloadFile?filePath=${data.result.filePath}`,
                  //tempFilePath：文件的临时地址，或者拼一个获取文件临时地址的接口
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: "上传失败",
                });
              }
            },
            complete: () => {
              uni.hideLoading();
            },
          });
        },
      });
    },
	//查看-下载视频
    downloadVideo(url) {
      let that = this;
      uni.showLoading({
        title: "加载中",
      });

      uni.downloadFile({
        url: url, //仅为示例，并非真实的资源
        success: (res) => {
          if (res.statusCode === 200) {
            this.previewItem = {
              url: res.tempFilePath,
              fileType: "2",//1图片，2视频
            };

            // 自动播放
            setTimeout(() => {
              let videoContxt = uni.createVideoContext("preview-video", that);
              videoContxt.play();
            }, 500);
          }
          uni.hideLoading();
        },
        error: (e) => {
          uni.hideLoading();
        },
      });
    },
    // 选择上传文件类型
    chooseUploadType(index) {
      if (index === 0) {
        // 图片
        this.chooseImage();
      } else if (index === 1) {
        // 视频
        this.chooseVideo();
      }
    },
    //  打开文件上传选择类型弹窗
    toShowChooseSheet() {
      if (this.dataList.length >= this.maxFilesNum) {
        uni.showToast({
          title: "最多只能上传20个附件",
          icon: "none",
        });
        return false;
      } else {
        this.showUploadTypeSheet = true;
      }
    },
  },

注意：图片或者视频预览的时候，需要一个文件的临时地址文章来源地址https://www.toymoban.com/news/detail-669201.html

到了这里，关于uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！