elmentui 批量手动上传文件，只请求一次接口，获取到的file里面的raw是文件格式，把他循环编列追加到let formData = new FormData()里面传给后端

最新推荐文章于 2023-03-17 15:30:14 发布

前端开发syl

最新推荐文章于 2023-03-17 15:30:14 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_43650924/article/details/127492945

版权

这是一个关于前端上传组件的实现，用于线下移交截图和备注。组件使用了Element UI库，包含图片上传、预览、删除功能，限制最多上传三张截图，并提供了上传文件到服务器的接口调用。同时，用户可以填写线下移交的备注，提交时会校验字符长度不超过200个。提交成功后，截图和备注将被保存。

摘要由CSDN通过智能技术生成

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