[JavaScript知识库]手动批量上传文件，只请求一次接口

?

<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>