feiniao-farm-h5/src/components/upload.vue

<template>
    <div class="upload-wrap">
        <div class="tips tips-text" v-if="tipText?.length>0">
            <span>{{tipText}}</span>
        </div>
        <div class="tips" v-if="!textShow">
            <el-icon class="icon" size="16"><Warning /></el-icon>
            <span>上传照片可精准预测最佳病虫防治时间</span>
        </div>
        <uploader class="uploader" v-model="fileList" multiple :max-count="3" :after-read="afterRead" @delete="deleteImg">
            <template v-if="exampleImg">
                <slot v-if="!fileList.length"></slot>
                <img class="plus" v-else src="@/assets/img/home/plus.png" alt="">
            </template>
            <img class="plus" v-else src="@/assets/img/home/plus.png" alt="">
        </uploader>
    </div>
</template>

<script setup>
import { onMounted, ref} from "vue";
import { Uploader } from "vant";
import eventBus from "@/api/eventBus";
import { base_img_url2 } from "@/api/config";
import { getFileExt } from "@/utils/util";
import { ElMessage } from "element-plus";
import UploadFile from "@/utils/upliadFile";
import 'vant/lib/uploader/style';
import { useStore } from "vuex";

const props = defineProps({
  tipText: {
    type: String,
    default: ''
  },
  fullPath:{
    type: Boolean,
    default: true
  },
  textShow: {
    type: Boolean,
    default: true
  },
  exampleImg: {
    type: Boolean,
    default: false
  },
})


const store = useStore();
const miniUserId = store.state.home.miniUserId;

const emit = defineEmits(['handleUpload'])

//上传照片
const fileList = ref([]);
const fileArr = ref([])
const imgArr = ref([])
const uploadFileObj = new UploadFile();

const afterRead = async (files) => {
    if (!Array.isArray(files)) {
      files = [files];
    }
    for(let file of files){
      // 将文件上传至服务器
      let fileVal = file.file;
      file.status = "uploading";
      file.message = "上传中...";
      let ext = getFileExt(fileVal.name);
      let key = `birdseye-look-mini/${miniUserId}/${new Date().getTime()}.${ext}`;
      let resFilename = await uploadFileObj.put(key, fileVal)
      file.status = "done";
      file.message = "";
      if(resFilename){
        fileArr.value.push(props.fullPath ? base_img_url2 + resFilename : resFilename)
        imgArr.value.push(resFilename)
        eventBus.emit('upload:change',fileArr.value)
        eventBus.emit('upload:changeArr',imgArr.value)
        emit('handleUpload',{imgArr:imgArr.value,fileList:fileArr.value})
      }else{
        fileList.value.pop()
        ElMessage.error('图片上传失败，请稍后再试！')
      }
    }
};

const deleteImg = (file,e) => {
    fileArr.value.splice(e.index,1)
    imgArr.value.splice(e.index,1)
    eventBus.emit('upload:change',fileArr.value)
    eventBus.emit('upload:changeArr',imgArr.value)
    emit('handleUpload',{imgArr:imgArr.value,fileList:fileArr.value})
}

function uploadReset(){
    fileList.value = []
    fileArr.value = []
    imgArr.value = []
}

onMounted(()=>{
    eventBus.off('upload:reset',uploadReset)
    eventBus.on('upload:reset',uploadReset)
})
</script>

<style lang="scss" scoped>

.upload-wrap {
    .tips {
        display: flex;
        align-items: center;
        color: #2199F8;
        background: #E9F5FF;
        border-radius: 4px;
        padding: 2px 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .icon {
            margin-right: 2px;
        }
    }
    .tips-text{
        background: linear-gradient(240deg,#FFFFFF 22%,rgba(33, 153, 248,0.2) 100%);
        border-radius: 20px 0 0 20px;
    }
    ::v-deep {
        .van-uploader__input-wrapper{
            text-align: center;
        }
        .el-select__wrapper:hover {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
        }
        .avatar-uploader .el-upload {
            width: 100%;
            border: 1px dashed #dddddd;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100%;
            height: 128px;
            text-align: center;
            background: #f6f6f6;
        }
    }
    .uploader{
        .plus{
            width: 80px;
            height: 80px;
        }
    }
}
</style>