FE_DQmini-code/components/ss-upload-image/ss-upload-image.vue

<template>
  <view class="upload">
    <view class="list">
      <view class="item interval" v-for="(item,index) in fileList" :key="index">
        <image :src="item" v-if="item"></image>
        <view class="icon-close" @click.stop="handleRemove(index)">
          <uni-icon type="closeempty" size="20" color="#fff"></uni-icon>
        </view>
      </view>
      <view class="item" @click="chooseImage" v-if="fileList.length<limit">
        <uni-icon type="image" size="30" color="#cccccd"></uni-icon>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      limit: {
        type: Number,
        default: 5
      },
      url: {
        type: String,
        required: true
      },
      name: {
        type: String,
        default: 'file'
      },
      formData: {
        type: Object,
        default () {
          return {}
        }
      },
      header: {
        type: Object,
        default () {
          return {}
        }
      },
      fileList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          success: (chooseImageRes) => {
            const uploadTask = uni.uploadFile({
              url: 'https://www.huorantech.cn/api-guarantee/dg-apply-amount-info/uploadFile',
              name: 'file',
              filePath: chooseImageRes.tempFilePaths[0],
              header: {
				  "Content-Type": "multipart/form-data",
				  "token":"eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxIiwic3ViIjoidG9rZW4iLCJpc3MiOiJBZG1pbiIsImlhdCI6MTYxMTcxMjUwNiwiZXhwIjoxNjExNzk4OTA2fQ.Hp6r0Abux__NoAp-8ssmcz4FPdiW_BRdNoXX5UDw_1w"
			  },
			  timeOut:30000,
              success: (uploadFileRes) => {
				console.log(uploadFileRes)
                this.$emit('on-success', JSON.parse(uploadFileRes.data))
              },
              fail: (err) => {
                this.$emit('on-error', err)
              }
            })
            uploadTask.onProgressUpdate((res) => {
              this.$emit('on-process', res)
            })
          }
        })
      },
      handleRemove(index) {
        this.$emit('on-remove', index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upload {
    .list {
      display: flex;
      flex-wrap: wrap;
      .item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        border: 2rpx solid #D9D9D9;
        background-color: #f3f3f3;
        margin-bottom: 20rpx;
        &.interval {
          margin-right: 16rpx;
          border: none;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
          margin: 0;
        }
        .icon-close {
          position: absolute;
          top: 0;
          right: 0;
          width: 28rpx;
          height: 28rpx;
          background-color: red;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 8rpx 0 0;
        }
        .icon {
          width: 48rpx;
          height: 48rpx;
        }
      }
    } 
  }
</style>