uni-app图片、视频上传

1、上传按钮

// template
<view class="add-circle" 
      @click="handlePostType" 
      v-if="fileList.length <= 9">  
    <text class="tn-icon-add"></text>
</view>

// css样式
.add-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    width: 210rpx;
    height: 210rpx;
    font-size: 60rpx;
    opacity: 0.5;
    border-radius: 20rpx;
    background: rgba(240, 240, 240, 1);
  }

2、上传方法

data() {
  return {
      fileList: [],
      formData: {
        biz: 'mini',
        type: 'post',
        id: ''
      },
      header: {"X-Access-Token": myCache.cache("miniToken"), 'X-Mini': 'mini'},
      action: 'http://192.168.101.152:8088/ckzs-boot/sys/common/upload/',
      fileSuccessList: [],// 最终传递给后端的文件集合
  }  
},
methods: {
     handlePostType() {
          uni.chooseMedia({
            count: 9,
            mediaType: ['image','video'],
            sourceType: ['album', 'camera'],
            maxDuration: 60,
            camera: 'back',
            compressed: false,
            success:(res) => {
              this.handleUploadFile(res.tempFiles);
              if(this.fileList.length) {
                this.fileList = [...this.fileList, ...res.tempFiles];
              } else {
                this.fileList = res.tempFiles;
              }
            }
          })
     },
  	// 图片上传
    async handleUploadFile(data) {
      data.forEach((item) => {
        uni.uploadFile({
          url: this.action, // 上传地址
          header: this.header,
          formData: this.formData,
          filePath: item.tempFilePath,
          name: 'file',
          success: uploadFileRes => {
            const { result } = JSON.parse(uploadFileRes.data);
            this.fileSuccessList.push(result);
          }
        });
      })
    },
}

3、上传图片在页面中的展示

<view v-for="(item, index) in fileList" :key="index" class="file-item">
      <view v-if="item.fileType === 'image'">
          <img :src="item.tempFilePath" 
                class="pic" 			
                @click.self="handleViewImg(item.tempFilePath)">
          <view class="icon-wrap" 
                 @click.self="handleDelete(index)">
                 <text class="tn-icon-close close-icon"></text>
          </view>
      </view>
      <view v-else>
           <video :disabled="false" :src="item.tempFilePath" class="pic"></video>
           <view class="icon-wrap"  
                 @click.self="handleDelete(index)">
                 <text class="tn-icon-close close-icon"></text>
          	</view>
       </view>
 </view>

// 方法
<script>
 export default {
  methods: {
    // 查看图片
    handleViewImg(path){
      const imgList = this.fileList.filter(item => item.fileType === 'image')
      uni.previewImage({
        urls: imgList,
        current: imgList.findIndex(item => item.tempFilePath == path),
      });
    },
    // 删除上传
    handleDelete(index) {
      uni.showModal({
        title: '提示',
        content: '你确定要删除吗？',
        success: res => {
          if (res.confirm) {
            this.fileList.splice(index, 1);
            this.fileSuccessList.splice(index, 1);
          }
        }
      });
    },
   }
 }
</script>

// css样式
.file-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
  }
  .file-item {
    position: relative;
    margin: 0 20rpx 20rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
  }
  .pic {
    width: 210rpx;
    height: 210rpx;
    border-radius: 20rpx;
  }

  .icon-wrap {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20rpx;
    text-align: center;
    color: white;
    width: 0;
    height: 0;
    border-bottom: 30rpx solid transparent;
    border-top: 30rpx solid rgba(0, 0, 0, 0.08);
    border-left: 30rpx solid transparent;
    border-right: 30rpx solid rgba(0, 0, 0, 0.08);
  }
  .close-icon {
    position: absolute;
    top: -20rpx;
  }

视频的查看可使用video组件中所封装的属性进行，默认可以进行全屏查看