手动批量上传文件，只请求一次接口

 

<template>

    <div class="offlineTransfer">

        <div class="line_title">

             <div class="line"></div><span class="blod">线下移交截图</span>

        </div>

           

        <div class="screenshot" :class="{'emptImg':isemptImg}">

            <el-upload

                ref="imgUpload"

                action="#"

                list-type="picture-card"

                :auto-upload="false"

                :on-remove="handleRemove"

                :file-list="fileList"

                :on-change="onChange"

                @clearFiles="clearFiles"

                :headers="headers"

                :disabled="disabledUpload"              

                :http-request="uploadFile"

                >

                    <i slot="default" class="el-icon-plus"></i>

                   

                    <div slot="file" slot-scope="{file}">

                        <img

                            class="el-upload-list__item-thumbnail"

                            :src="file.url" alt=""

                        >

                        <span class="el-upload-list__item-actions">

                            <span

                            class="el-upload-list__item-preview"

                            @click="handlePictureCardPreview(file)"

                            >

                                <i class="el-icon-zoom-in"></i>

                            </span>

                            <span

                            v-if="!disabled"

                            class="el-upload-list__item-delete"

                            @click="handleRemove(file)"

                            >

                                <i class="el-icon-delete"></i>

                            </span>

                        </span>

                    </div>

                   

            </el-upload>

            <el-dialog :visible.sync="dialogVisible">

                <img width="100%"  :src="dialogImageUrl" alt="">

            </el-dialog>

        </div>

        <span style="color:#ff4949;display:inline-block;padding-bottom:15px;font-size: 12px;height:20px" ><span v-if="disabledUpload">最多可上传三张截图</span><span v-show="isemptImg">请选择移交截图</span></span>

        <div class="line_title">

             <div class="line"></div><span class="blod" >线下移交备注</span>

        </div>

        <div class="remark">

            <el-form :model="form" :rules="rules" ref="form" label-width="auto" class="demo-ruleForm">

                    <el-form-item label="" prop="desc"

                    :rules="[{min:0,max:200,message:'不能超过200个字符',trigger:'blur'}]"

                     >

                        <el-input type="textarea" v-model="form.desc" placeholder="备注(最多200个字符)"></el-input>

                    </el-form-item>

            </el-form>

        </div>

       

        <div class="btn">

            <el-button type="primary" size="small" class="el-icon-s-promotion submit" @click="submit('form')">直接提交</el-button>

            <!-- <el-button plain size="small" @click="againSubmit('form')">初次反馈,待进一步处置</el-button> -->

        </div>

    </div>

</template>

<script>

import db from "@/utils/localstorage";

import {upload} from './api'

export default {

    name: 'FraudFrontOfflineTransfer',

    props:{

        fkWarnId:String,

        op:String,

    },

   data() {

      return {

        action:`${process.env.VUE_APP_BASE_API}/warning/antiWarnTransfer/TransferUploadFile`,

        // action:`${process.env.VUE_APP_BASE_API}/warning/antiReview/commitReviewDesc`,

        form:{

            desc:''

        },

        Rules:{

            desc:[

                 {min:0,max:200,message:'不能超过200个字符',trigger:'blur'},

            ],

      },

        dialogImageUrl: '',

        dialogVisible: false,

        disabled: false,

        disabledUpload:false,

        isemptImg:false,

        fileList:[],

      };

    },

    computed:{

        headers() {

            return {

                'Content-Type': 'multipart/form-data',

                token: 'Bearer ' + db.get("TOKEN", ""),

                tenant: db.get("TENANT", "") || "",

                Authorization: `Basic ${Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`

            };

        },

    },

    watch:{

        fileList:{

            handler(n,o){

                 n.length>=3?(this.disabledUpload = true):this.disabledUpload = false

                 n.length>0?this.isemptImg=false:''

            },

            immediate:true,

            deep:true

        }

               

    },

    methods: {

        uploadFile() {

            const formData = new FormData();

                   this.fileList.forEach(({raw},index) => {

                    formData.append('files',raw);

                });

                formData.append('bizType','warning');

                formData.append('bucket','public');

                formData.append('storageType','LOCAL');

                formData.append('id',this.fkWarnId);

                formData.append('content',this.form.desc);

                upload(formData).then((res)=>{

                    console.log(999,res);

                    if(res.data.code==0){

                        this.$message.success('提交成功')

                        this.fileList = []

                        this.$refs.form.resetFields();

                    }

                })

        },

      handleRemove(file) {  

        let uploadFiles = this.$refs.imgUpload.uploadFiles

        for (var i = 0; i < uploadFiles.length; i++) {

          if (uploadFiles[i]['uid'] == file.uid) {

            uploadFiles.splice(i, 1)

            this.fileList.splice(i, 1)

          }

        }

       

      },

      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;

        this.dialogVisible = true;

      },

      handleDownload(file) {

        window.open(file.url)

      },

      submit(formName){

        this.fileList.length==0?this.isemptImg=true:this.isemptImg=false

        this.$refs[formName].validate((valid) => {

          if (valid) {

            if(this.fileList.length)

                this.uploadFile()

          } else {

            console.log('error submit!!');

            return false;

          }

        });

       

      },

      onChange(f,fs){

           this.fileList = fs    

      },

      clearFiles(){

      },  

    }

};

</script>

<style lang="scss" scoped>

@import './style/base.scss';

.offlineTransfer{

     padding: 15px 0 15px 15px;

     .line_title{

        display: flex;

        justify-content: flex-start;

        margin-bottom: 10px;

        .line{ width: 4px;height: 20px;background-color: $blue;

                margin-right: 10px;}

        .blod{font-weight: 800;margin-right: 10px;color: $blue;}

    }

    .screenshot{

        border: 1px solid #dbdbdb;

        min-height: 40vh;

        margin-bottom: 5px;

        border-radius: 4px;

        padding: 10px;

    }

    .emptImg{

        border: 1px solid #eb0202;

    }

    .remark{

        // border: 1px solid #dbdbdb;

        // min-height: 25vh;

        // padding: 10px;

       

    }

    .btn{

        display: flex;

        justify-content: center;

        align-items: center;

        margin-top: 15px;

        .el-button{

            background-color: $blue;

        }

    }

     /deep/.el-textarea__inner{

            height: 25vh !important;

        }

}   

</style>