sooka_consult_uniapp/components/upload/index.vue

<template>
  <view class="align-items" style="margin-top: 20px;margin-bottom: 20px;">
    <!-- <view class="container" style="color: #b2b2b2;">*请上传照片</view> -->
    <view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
      
      <view v-for="(item,index) in imgArr" :key="index" style="position: relative;">
        <view
            v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'|| item.substring(item.length-4)=='jpeg' ">
          <image :src="loadImgSrcLocalhost(item)" mode="" style="width: 200rpx; height: 150rpx; margin: 0 12rpx;"
                 @click="showPhoto(index)">
          </image>
        </view>
        <view v-else>
          <video :src="loadImgSrcLocalhost(item)" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
        </view>
        <view @click="remove(index)"
              style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
          <image src="../../static/images/upload/icon_close.png" style=" width: 15px; height: 15px;">
          </image>
        </view>
      </view>
	  <image src="../../static/images/upload/updateimg.png" mode=""
	         class="uploadPic" @click="choose()"></image>
    </view>
  </view>
</template>

<script>
import {getToken} from '@/utils/auth'

export default {
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken()
      },
      loading: false,
	  progress:0,
      // imgArr: [],
    }
  },
  props: {
    imgArr: {
      type: Array,
      default: () => []
    },
    // 图片数量限制
    limit: {
      type: Number,
      default: 100,
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 10,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["png", "jpg", "jpeg"],
    },
  },
  methods: {
    //上传图片
    choose() {
      // if(this.imgArr>limit)
      let _this = this;
      uni.showActionSheet({
        title: '上传',
        itemList: ['图片', '视频'],
        success: (res) => {
          if (res.tapIndex == 0) {
            this.chooseimage()
          } else {
            this.choosevideo()
          }
        }
      })
    },
    chooseimage() {
      let _this = this;
      uni.chooseImage({
        // count: 1, //最多可以选择的图片张数，默认9
        sizeType: ['album', 'camera'],
        success(resp) {
          let fileCount=resp.tempFiles.length+_this.imgArr.length
          if ( fileCount> _this.limit) {
            uni.showToast({
              title: '上传文件数量不能超过 '+_this.limit+' 个!',
              icon: 'none'
            })
            return;
          }
          resp.tempFiles.forEach((item, index) => {
            if (item.size / 1024 / 1024 > _this.fileSize) {
              uni.showToast({
                title: '上传头像图片大小不能超过 '+_this.fileSize+' MB!',
                icon: 'none'
              })
              return;
            }
            const task = uni.uploadFile({
              url: _this.$HTTP + `/common/upload`,
              filePath: item.path,
              name: 'file',
              formData: {},
              header: _this.headers,
              success: res => {
                // 判断是否json字符串，将其转为json格式
                let data = JSON.parse(res.data);
                if (![200].includes(data.code)) {
                  _this.$modal.msg(data.msg)
                } else {
                  if (_this.progress === 100) {
                    _this.imgArr.unshift(data.fileName)
					console.log(_this.imgArr)
                    _this.$modal.msg('上传成功！')
                    _this.photo = false;
                    _this.$emit('updateImg', _this.imgArr);
                  }
                }
              },
              fail: e => {
                console.log(e)
                _this.$modal.msg('上传失败！')
              },
              complete: res => {
                uni.hideLoading();
                _this.uploading = false;

              }
            });
            task.onProgressUpdate(res => {
              _this.progress = res.progress;
              uni.showLoading({
                title: '上传中'
              })
              if (_this.progress != 100) {
                _this.loading = false
              } else {
                _this.loading = true
              }
            });
          })
        },
      })
    },

    choosevideo() {
      let _this = this;
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        success(resp) {
          console.log('视频')
          let fileCount=1 +_this.imgArr.length
          if ( fileCount> _this.limit) {
            uni.showToast({
              title: '上传文件数量不能超过 '+_this.limit+' 个!',
              icon: 'none'
            })
            return;
          }
          if (resp.size / 1024 / 1024 > _this.fileSize) {
            uni.showToast({
              title: '上传视频大小不能超过 '+_this.fileSize+' MB!',
              icon: 'none'
            })
            return;
          }
          const task = uni.uploadFile({
            url: _this.$HTTP + `/common/upload`,
            filePath: resp.tempFilePath,
            name: 'file',
            formData: {},
            header: _this.headers,
            success: res => {
              // 判断是否json字符串，将其转为json格式
              let data = JSON.parse(res.data);
              if (![200].includes(res.statusCode)) {
                this.uploadError(index, data);
              } else {
                //上传成功
                if (_this.progress === 100) {
                  _this.imgArr.push(data.fileName)
                  _this.$modal.msg('上传成功！')
                  _this.photo = false;
                  _this.$emit('updateImg', _this.imgArr);
                }
              }
            },
            fail: e => {
              _this.$modal.msg('上传失败！')
              this.uploadError(index, e);
            },
            complete: res => {
              uni.hideLoading();
              _this.uploading = false;
            }
          });
          task.onProgressUpdate(res => {
            _this.progress = res.progress;
            uni.showLoading({
              title: '上传中'
            })
            if (_this.progress != 100) {
              _this.loading = false
            } else {
              _this.loading = true
            }
          });

        },
      })
    },
    //查看图片
    showPhoto(index) {
      uni.previewImage({
        current: index,
        urls: this.imgArr,
      })
    },
    //删除图片
    remove(index) {
      uni.showModal({
        title: '提示',
        content: '是否删除该图片或视频？',
        success: (res) => {
          if (res.confirm) {
            this.imgArr.splice(index, 1);
            this.$emit('updateImg', this.imgArr);
          }
        }
      })
    },
  }
}

</script>

<style lang="scss">
	.uploadPic{
		position: relative;
		height: 150rpx; 
		margin: 0 12rpx; 
		width: 200rpx; 
	}
	.uploadPic::after{
		position: absolute;
		content:'请上传图片';
		bottom: 0;
	}
</style>