终止el-upload的文件上传

我超幸运12138

已于 2024-06-03 17:22:03 修改

阅读量1.4k

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端 elementui

于 2024-06-03 17:21:51 首次发布

本文链接：https://blog.csdn.net/m0_45858045/article/details/139420292

这篇博客详细介绍了在Vue.js项目中使用Element UI组件库的el-upload时，如何在上传过程中终止文件上传的操作。内容包括触发取消上传的条件、相关API的使用方法以及在实际应用中的实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div class="answerBox">
	<el-input class="answer" v-model="dataAnswer.answer" style="width: 100%;" :rows="2" type="textarea" placeholder="请在此输入您的答案" resize="none" />
	<div class="input-helper">您已输入{{ dataAnswer.answer.length }}字</div>
	</div>
<p class="please_answer">请上传文件</p>
 <el-upload v-model:file-list="dataAnswer.file" ref="fileUpload" class="upload-demo" :action="uploadUrl"
                    :before-upload="beforeFileUpload" :on-success="uplpadFileSuccess" :on-remove="removeFile"
                    :headers="headersToken" :on-progress="handleUploadProgress" :show-file-list="false" multiple
                    accept=".rar, .zip, .doc, .docx, .xls, .xlsx, .pdf, .jpg,.jpeg, .png">
                    <el-button type="primary" style="margin-top: 20px;">上传文件</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            <el-icon style="margin-right: 5px;">
                                <Warning />
                            </el-icon> 文件限制100M以内，可上传多个，支持扩展名：rar 、zip 、doc 、docx 、xls、xlsx、pdf、jpg、jpeg、png
                        </div>
                    </template>
                </el-upload>
//直接写的展示列表页面
                <div class="fileContent" v-if="fileList.length > 0">
                    <div v-for="(item, index) in  fileList" class="file">
                        <div class="fileItem">
                            <div class="fileName">
                                <div>
                                    <!--                            文件夹-->
                                    <svg v-if="!('file_ext' in item)" t="1687317670513" class="icon" viewBox="0 0 1024 1024"
                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4486" width="26" height="26">
                                        <path
                                            d="M918.673 883H104.327C82.578 883 65 867.368 65 848.027V276.973C65 257.632 82.578 242 104.327 242h814.346C940.422 242 958 257.632 958 276.973v571.054C958 867.28 940.323 883 918.673 883z"
                                            fill="#FFCA28" p-id="4487"></path>
                                        <path
                                            d="M512 411H65V210.37C65 188.597 82.598 171 104.371 171h305.92c17.4 0 32.71 11.334 37.681 28.036L512 411z"
                                            fill="#FFCA28" p-id="4488"></path>
                                        <path
                                            d="M918.673 883H104.327C82.578 883 65 865.42 65 843.668V335.332C65 313.58 82.578 296 104.327 296h814.346C940.422 296 958 313.58 958 335.332v508.336C958 865.32 940.323 883 918.673 883z"
                                            fill="#FFCA28" p-id="4489"></path>
                                    </svg>
                                    <!--                            doc-->
                                    <svg v-if="'file_ext' in item && (item.file_ext.toLowerCase() == 'doc' || item.file_ext.toLowerCase() == 'docx')"
                                        t="1687317744573" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4630" width="26" height="26">
                                        <path
                                            d="M959.16 187.68c2.14-23.23-16.1-41.26-39.32-38.92-108.92-1.76-217.84 0-326.84-0.61V66.64h-60.95C375.86 94.45 219.57 121 63.38 148.35v713c155.38 27.2 310.85 53.18 465.93 81.51H593v-81.51c102 0 203.87-0.2 305.86 0.31 17.32-0.82 36.58 0.51 51.45-10.09 11.92-18.24 8.87-41.06 9.89-61.64-1.45-200.72 0.69-401.53-1.04-602.25z"
                                            fill="#2A5699" p-id="4631"></path>
                                        <path
                                            d="M593 178.71h336.21v652.08H593v-81.51h264.9v-40.76H593v-50.94h264.9v-40.76H593v-50.94h264.9v-40.75H593v-50.95h264.9v-40.75H593v-50.94h264.9v-40.76H593v-50.94h264.9V250H593zM115.57 419.49h42.54q14.39 0 21.94 2.38a38.18 38.18 0 0 1 17.38 11.46 55.43 55.43 0 0 1 11 20.18q3.78 11.94 3.78 29.43 0 15.37-3.54 26.51-4.33 13.58-12.35 22-6.05 6.37-16.35 9.94-7.71 2.64-20.6 2.64h-43.8z m23.28 21.06V523h17.38q9.75 0 14.07-1.18a21 21 0 0 0 9.39-5.18q3.74-3.66 6.09-12t2.36-22.81q0-14.43-2.36-22.17t-6.6-12.06a21.6 21.6 0 0 0-10.78-5.87q-4.87-1.18-19.1-1.18zM227.23 482.51q0-19 5.27-31.94a59.12 59.12 0 0 1 10.73-17.07 45.09 45.09 0 0 1 14.9-11.21q10.78-4.93 24.85-4.93 25.48 0 40.77 17.07T339 481.92q0 30.15-15.17 47.18t-40.58 17q-25.72 0-40.89-16.94t-15.13-46.65z m24-0.85q0 21.15 9 32.06a29.54 29.54 0 0 0 45.8 0.09Q315 503 315 481.32q0-21.4-8.69-31.94t-23.08-10.54q-14.39 0-23.19 10.67t-8.83 32.15zM351.31 503.49l22.69-2.38q2 12.31 8.29 18.09t16.82 5.8q11.25 0 16.94-5.14t5.7-12a11.94 11.94 0 0 0-2.4-7.51q-2.4-3.1-8.37-5.39-4.09-1.54-18.64-5.44-18.72-5-26.26-12.32a33.55 33.55 0 0 1-10.62-25.05 33.91 33.91 0 0 1 5-17.8 31.92 31.92 0 0 1 14.39-12.61q9.4-4.34 22.69-4.34 21.7 0 32.67 10.28t11.52 27.44l-23.28 1.1q-1.49-9.6-6.41-13.8t-14.74-4.21q-10.15 0-15.88 4.5a9.33 9.33 0 0 0-3.7 7.73 9.85 9.85 0 0 0 3.46 7.56q4.4 4 21.39 8.33t25.12 9a33.6 33.6 0 0 1 12.74 12.66q4.6 8 4.6 19.84a38.79 38.79 0 0 1-5.51 20A33.64 33.64 0 0 1 424 541.67q-10.07 4.55-25.08 4.55-21.86 0-33.58-10.91t-14.03-31.82z"
                                            fill="#FFFFFF" p-id="4632"></path>
                                    </svg>
                                    <!--                             pdf-->
                                    <svg v-if="'file_ext' in item && item.file_ext.toLowerCase() == 'pdf'" t="1687317766940"
                                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4773" width="26" height="26">
                                        <path
                                            d="M901.63125 926.725c0 12.8-5.125 25.0875-14.3375 34.3-9.225 9.2125-21.5 14.3375-34.3125 14.3375H170.49375c-12.8 0-25.6-5.125-34.3-14.3375-9.2125-9.225-14.3375-21.5-14.3375-34.3V48.6375c0-12.8 5.1125-25.6 14.3375-34.3C144.89375 5.125 157.70625 0 170.49375 0H589.31875c12.8 0 25.6 5.125 34.8125 14.3375l263.675 263.6875c9.2125 9.2125 14.3375 21.5 14.3375 34.8125v613.8875h-0.5125z"
                                            fill="#EBECF0" p-id="4774"></path>
                                        <path
                                            d="M901.63125 926.725v48.6375c0 12.8-5.125 25.6-14.3375 34.3-9.225 9.225-21.5 14.3375-34.3125 14.3375H170.49375c-27.1375 0-48.6375-22.0125-48.6375-48.6375v-48.6375c0 12.8 5.1125 25.0875 14.3375 34.3 9.2125 9.2125 21.5 14.3375 34.3 14.3375h682.5c27.1375 0 48.6375-22.0125 48.6375-48.6375z"
                                            fill="#C1C7D0" p-id="4775"></path>
                                        <path
                                            d="M121.85625 536.575v-97.8L24.06875 536.575h97.7875z m779.775 0l1.025-97.8 97.275 97.8h-98.3z"
                                            fill="#D30000" p-id="4776"></path>
                                        <path
                                            d="M901.63125 312.8375v6.65H637.94375c-27.1375 0-48.6375-22.0125-48.6375-48.6375V0c12.8 0 25.6 5.125 34.8125 14.3375L888.31875 278.025c8.7 9.2125 13.825 21.5 13.3125 34.8125z"
                                            fill="#C1C7D0" p-id="4777"></path>
                                        <path
                                            d="M502.93125 611.1125H462.81875v142.9875h39.4c44.75 0 68.9375-25.2125 68.9375-73.85 0-42.325-22.125-68.575-68.225-69.1375zM274.95625 611.1875H217.56875v60.7625h57.3875c23.5125 0 38.375-8.0625 38.375-30.7875 0-18.525-11.3875-29.975-38.375-29.975z"
                                            fill="#FF1D1D" p-id="4778"></path>
                                        <path
                                            d="M24.58125 536.575v243.2c0 13.3125 5.1125 25.6 14.3375 34.8125 8.7 9.225 21.5 14.3375 34.3 14.3375h877.575c26.625 0 48.6375-21.5 48.6375-48.6375V536.575H24.58125z m254.675 178.475H217.56875v82.075h-55.8v-228.75h118.3625c53.1875 0 88.55 26.8875 88.55 71.9s-33.3125 74.775-89.425 74.775z m230.275 82.075h-102.225v-228.75h103.4c77.075 0 119.25 50.025 119.25 110.375 0 73.225-53.85 118.375-120.425 118.375z m354.3375-184.5875H731.13125v52.025h123.8125v44.4875h-123.8125v88.0625h-55.5125v-228.75h188.25v44.1625z"
                                            fill="#FF1D1D" p-id="4779"></path>
                                        <path
                                            d="M280.11875 568.375h-118.35v228.75h55.8v-82.075h61.6875c56.1125 0 89.425-28 89.425-74.775s-35.3625-71.9-88.55-71.9z m-5.175 103.575h-57.3875v-60.7625h57.3875c26.9875 0 38.375 11.45 38.375 29.975 0 22.7125-14.875 30.7875-38.375 30.7875zM510.70625 568.375h-103.4v228.75h102.225c66.575 0 120.425-45.15 120.425-118.375 0-60.35-42.1625-110.375-119.25-110.375z m-8.5 185.725h-39.4V611.1125h40.1125c46.0875 0.575 68.225 26.825 68.225 69.1375 0 48.6375-24.1875 73.85-68.9375 73.85zM675.61875 797.125h55.5125v-88.0625h123.8125v-44.4875h-123.8125v-52.025h132.7375V568.375h-188.25v228.75z"
                                            fill="#FFFFFF" p-id="4780"></path>
                                    </svg>
                                    <!--                             ppt-->
                                    <svg v-if="'file_ext' in item && (item.file_ext.toLowerCase() == 'pptx' || item.file_ext.toLowerCase() == 'ppt')"
                                        t="1687317783822" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4921" width="26" height="26">
                                        <path
                                            d="M538.731891 0h65.98683v107.168391c124.387582 0.722484 248.895579-1.324553 373.28316 0a40.699906 40.699906 0 0 1 45.034808 46.118533c2.047037 222.404516 0 444.929445 1.204139 667.454374-1.204139 24.082785 2.287865 50.694262-11.198495 72.248354-16.978363 12.041392-39.014111 10.957667-59.002822 12.041392-116.319849-0.60207-232.639699 0-349.200376 0V1023.518344h-72.248354C355.100659 990.886171 177.490122 960.662277 0 928.752587V95.488241C179.537159 63.698965 359.074318 31.30762 538.731891 0z"
                                            fill="#D24625" p-id="4922"></path>
                                        <path
                                            d="M604.718721 142.931326H988.598307v726.216369H604.718721v-95.247413h279.239887v-47.563499H604.718721v-60.206962h279.239887v-46.96143H604.839135v-69.960489c46.118532 14.570085 98.619003 14.208843 139.800564-14.088429 44.553151-27.093133 67.793039-78.630292 71.646284-130.047036H663.119473c0-51.777987 0.60207-103.555974-0.963311-155.213547-19.145814 3.732832-38.171214 7.826905-57.196614 12.041392z"
                                            fill="#FFFFFF" p-id="4923"></path>
                                        <path
                                            d="M686.35936 224.69238a165.689558 165.689558 0 0 1 153.16651 156.5381c-51.055503 0.60207-102.111007 0-153.286924 0 0.120414-52.380056 0.120414-104.278457 0.120414-156.5381z"
                                            fill="#D24625" p-id="4924"></path>
                                        <path
                                            d="M186.64158 314.521167c63.21731 3.130762 139.680151-25.527752 192.662277 22.878645 50.092192 62.374412 36.84666 176.888053-37.44873 214.095955-26.370649 13.847601-56.714958 12.041392-85.373471 10.957667v139.68015l-69.238006-5.900282c-1.806209-127.157103-2.047037-254.434619-0.60207-381.712135z"
                                            fill="#FFFFFF" p-id="4925"></path>
                                        <path
                                            d="M255.759172 378.942615c22.878645-0.963311 51.296331-5.298213 66.709313 16.737536a87.902164 87.902164 0 0 1 1.565381 78.148635c-13.245532 24.082785-43.228598 22.035748-66.468485 24.925682-2.408278-39.857008-2.167451-79.714017-1.806209-119.811853z"
                                            fill="#D24625" p-id="4926"></path>
                                    </svg>
                                    <!--                             MP4-->
                                    <svg v-if="'file_ext' in item && (item.file_ext.toLowerCase() == 'mp4' || item.file_ext.toLowerCase() == 'avi' || item.file_ext.toLowerCase() == 'mov')"
                                        t="1687317802104" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5067" width="26" height="26">
                                        <path
                                            d="M594.944 0l335.12448 341.31968v563.2c0 65.9968-52.50048 119.48032-117.29408 119.48032H209.54624c-64.7936 0-117.2992-53.5296-117.2992-119.48032V119.48032C92.25216 53.48352 144.75776 0 209.55136 0H594.944z"
                                            fill="#627CFE" p-id="5068"></path>
                                        <path
                                            d="M930.06848 341.31968h-211.9168c-64.74752 0-123.20768-59.48928-123.20768-125.4912V0l335.12448 341.31968z"
                                            fill="#FFFFFF" fill-opacity=".4" p-id="5069"></path>
                                        <path d="M519.68 606.62784v66.42176l120.832 73.40032v-213.0432z" fill="#FFFFFF"
                                            opacity=".99" p-id="5070"></path>
                                        <path
                                            d="M534.528 512.13824H282.25024a22.48192 22.48192 0 0 0-22.2976 22.62016v210.52928c0 12.38016 9.91744 22.66624 22.25152 22.66624h252.50816a22.48192 22.48192 0 0 0 22.25152-22.66624v-210.7136a22.62016 22.62016 0 0 0-22.43584-22.43584zM356.2496 719.36v-158.81216L483.328 639.9488 356.2496 719.36z"
                                            fill="#FFFFFF" opacity=".99" p-id="5071"></path>
                                    </svg>
                                    <!--                             zip-->
                                    <svg v-if="'file_ext' in item && (item.file_ext.toLowerCase() == 'zip' || item.file_ext.toLowerCase() == 'rar')"
                                        t="1687317832089" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5212" width="26" height="26">
                                        <path d="M97.9 376h828.4v269.2H97.9z" fill="#F95F5D" p-id="5213"></path>
                                        <path
                                            d="M926.3 376V161.5c0-26.6-23.8-50.3-52.1-50.3H149.9c-28.3 0-52.1 23.7-52.1 50.3V376h828.5z m0 0"
                                            fill="#55C7F7" p-id="5214"></path>
                                        <path
                                            d="M97.9 645.2v214.5c0 26.6 23.6 50.3 51.7 50.3h725c28.1 0 51.7-23.7 51.7-50.3V645.2H97.9z m0 0"
                                            fill="#7ECF3B" p-id="5215"></path>
                                        <path d="M421.8 111.2h184.9V910H421.8z" fill="#FDAF42" p-id="5216"></path>
                                        <path
                                            d="M606.7 457.4v112.4H413V457.4h193.7m31.1-45.9H381.9c-4.4 0-11.8 4.4-11.8 11.8v179c0 4.4 4.4 11.8 11.8 11.8h255.9c4.4 0 11.8-4.4 11.8-11.8v-179c-2.9-8.8-7.4-11.8-11.8-11.8z m0 0"
                                            fill="#FFFFFF" p-id="5217"></path>
                                    </svg>
                                    <!--                             xls-->
                                    <svg v-if="'file_ext' in item && (item.file_ext.toLowerCase() == 'xls' || item.file_ext.toLowerCase() == 'xlsx')"
                                        t="1687317865856" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5358" width="26" height="26">
                                        <path
                                            d="M533.58 75H594v81.31c101.74 0 203.47 0.2 305.21-0.31 17.18 0.71 36.09-0.51 51 9.76 10.47 15 9.25 34.15 10 51.43q-0.76 264.66-0.2 529.12c-0.51 29.58 2.74 59.76-3.45 88.93-4.14 21.1-29.56 21.61-46.56 22.32-105.3 0.31-210.69-0.2-316.09 0V949h-63.07c-154.9-28.15-310.1-54.17-465.2-81.31V156.37C221.66 129.23 377.67 102.51 533.58 75z"
                                            fill="#207245" p-id="5359"></path>
                                        <path
                                            d="M594 186.76h335.4v640.31H594v-61h81.31v-71.12H594v-40.66h81.31v-71.14H594v-40.66h81.31v-71.14H594v-40.66h81.31v-71.14H594v-40.66h81.31v-71.15H594z"
                                            fill="#FFFFFF" p-id="5360"></path>
                                        <path
                                            d="M715.92 247.74h142.29v71.15H715.92zM715.92 359.55h142.29v71.15H715.92zM715.92 471.35h142.29v71.15H715.92zM715.92 583.15h142.29v71.15H715.92zM715.92 694.95h142.29v71.15H715.92z"
                                            fill="#207245" p-id="5361"></path>
                                        <path
                                            d="M98.48 551.16l39.3-64.82-35.61-59.39h27.14l23.06 39.91L175 426.95h26.91l-35.77 60.33 39.3 63.89h-28l-25.49-43-25.57 43zM217.94 551.16V428h23.22v102.23h57.73v20.93zM309.56 510.75l22.59-2.37q2 12.28 8.27 18t16.82 5.77q11.22 0 16.9-5.13t5.69-12a11.91 11.91 0 0 0-2.39-7.49q-2.39-3.1-8.35-5.38-4.08-1.53-18.59-5.43-18.67-5-26.2-12.29a33.47 33.47 0 0 1-10.59-25 33.82 33.82 0 0 1 5-17.76A31.84 31.84 0 0 1 333 429.15q9.37-4.33 22.63-4.33 21.65 0 32.59 10.25t11.49 27.37l-23.22 1.1q-1.49-9.57-6.39-13.77t-14.7-4.2q-10.12 0-15.85 4.49a9.3 9.3 0 0 0-3.69 7.71 9.83 9.83 0 0 0 3.45 7.54q4.39 4 21.33 8.31t25.06 8.93a33.52 33.52 0 0 1 12.7 12.63q4.59 8 4.59 19.79a38.7 38.7 0 0 1-5.49 20 33.56 33.56 0 0 1-15.5 13.86q-10 4.54-25 4.54-21.81 0-33.49-10.89t-13.95-31.73z"
                                            fill="#FFFFFF" p-id="5362"></path>
                                    </svg>
                                    <!--              jpg-->
                                    <svg v-if="'file_ext' in item && (item.file_ext.toLowerCase() == 'jpg' || item.file_ext.toLowerCase() == 'jpeg' || item.file_ext.toLowerCase() == 'png' || item.file_ext.toLowerCase() == 'gif' || item.file_ext.toLowerCase() == 'bmp')"
                                        t="1689666526222" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2688" width="26" height="26">
                                        <path
                                            d="M594.944 0l335.12448 341.31968v563.2c0 65.9968-52.50048 119.48032-117.29408 119.48032H209.54624c-64.7936 0-117.2992-53.5296-117.2992-119.48032V119.48032C92.25216 53.48352 144.75776 0 209.55136 0H594.944z"
                                            fill="#36D2AD" p-id="2689"></path>
                                        <path
                                            d="M930.06848 341.31968h-211.9168c-64.74752 0-123.20768-59.48928-123.20768-125.4912V0l335.12448 341.31968z"
                                            fill="#FFFFFF" fill-opacity=".4" p-id="2690"></path>
                                        <path
                                            d="M613.56032 426.68032H278.4256c-10.24 0-18.61632 8.4736-18.61632 18.944V749.056c0 10.4704 8.37632 18.944 18.61632 18.944h335.1296c10.28608 0 18.61632-8.4736 18.61632-18.944V445.62432a18.80576 18.80576 0 0 0-18.61632-18.944z m-37.23776 284.39552H315.66848v-94.7712l55.8592-56.87296 93.08672 94.81216 55.8592-56.92416 55.84896 56.92416v56.87808-0.0512z m-37.23776-151.64416a37.56032 37.56032 0 0 1-37.23264-37.9392c0-20.9408 16.66048-37.93408 37.23264-37.93408 20.57728 0 37.23776 16.99328 37.23776 37.9392 0 20.9408-16.66048 37.93408-37.23776 37.93408z"
                                            fill="#FFFFFF" p-id="2691"></path>
                                    </svg>

                                    <svg v-if="'file_ext' in item && (item.file_ext.toUpperCase() == 'TXT')"
                                        t="1687317865856" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5358" width="26" height="26">
                                        <path
                                            d="M192 0h448.128L960 320v576a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z"
                                            fill="#2696FF" p-id="7398"></path>
                                        <path
                                            d="M417.728 546.176h-60.8v170.56h-40.96V546.176H256V512h161.728v34.176z m94.4 36.416L549.376 512h47.04l-57.792 101.504 59.328 103.232h-47.616l-38.208-71.68-38.208 71.68h-47.552l59.328-103.232L427.84 512h47.04l37.248 70.592zM768 546.176h-60.8v170.56h-40.96V546.176h-60.032V512H768v34.176z"
                                            fill="#FFFFFF" opacity=".9" p-id="7399"></path>
                                        <path d="M640 0l320 320h-192a128 128 0 0 1-128-128V0z" fill="#8FC6FE" p-id="7400">
                                        </path>
                                    </svg>
                                </div>
                                <div style="margin: 0 5px; color: #000000; display: flex; align-items: center;">
                                    <p class="fileNameP">{{ fileName(item.name) }}</p><span>{{
                                        item.file_ext.toLowerCase() }}</span>
                                </div>
                                <el-icon style="color: #9A99A9; cursor: pointer;" @click="deleteFile(item, index)">
                                    <CircleClose />
                                </el-icon>
                            </div>
                            <el-progress v-if="Number(item.satus) && Number(item.satus) < 100"
                                :percentage="Number(item.satus)" :stroke-width="4" style="margin-top: 0px;width: 236px;" />
                        </div>
                    </div>
                </div>

// 上传部分
const fileList = ref([])
//上传之前对文件的类型和大小进行限制
const beforeFileUpload: UploadProps["beforeUpload"] = (file) => {

    const sizeLimit = file.size / 1024 / 1024 < 100;
    if (!sizeLimit) {
        ElMessage.error("文件大小不能超过100MB！");
        return false;
    }
    const fileType = file.type;
    const allowedTypes = ['application/vnd.rar', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/pdf', 'image/jpeg', 'image/png'];
//尽量使用这样的方法来校验文件类型  上传的时候有时候会获取不到上面的type此时就无法通过校验
var FileExt = file.name.replace(/.+\./, "");
    if (!allowedTypes.includes(fileType)) {
        if (['rar', 'zip', "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "pdf", "png"].indexOf(FileExt.toLowerCase()) === -1) {
            ElMessage.error('只能上传rar、zip、doc、docx、xls、xlsx、pdf、jpg、jpeg、png文件');
            return false;
        }
    }


};
//上传成功的 这个是为了后续保存
const uplpadFileSuccess: UploadProps["onSuccess"] = (res, file) => {
    if(res.code==200){
        let index = fileList.value.findIndex(item => item.uid == file.uid)
        if (index != -1) {
        fileList.value[index].url = res.data.url
        // ElMessage.success("上传成功")
    }
    }
};
const removeFile: UploadProps["onRemove"] = (res, file) => {


};
//自定义进度条 重点的一个函数
const fileUpload = ref()
const handleUploadProgress = (event, file) => {
    const fileObject = reactive({
        name: '',//名称
        satus: 0,//上传进度
        file_ext: '',//文件类型
        uid: '',//上传自动生成的标识符
        code: 0,//上传之后返回的code码
        url: ''
    })
    let index = fileList.value.findIndex(item => item.uid == file.uid)
    if (index == -1) {
        fileObject.name = file.name
        fileObject.file_ext = file.name.split('.').pop()
        fileObject.satus = Number(event.percent).toFixed(2)
        fileObject.uid = file.uid
        fileList.value.unshift(fileObject)
    } else {
        //找到数组里面的值来进行更新
        fileList.value[index].satus = Number(event.percent).toFixed(2)
    }

}
//删除正在上传的还有已经上传成功的是两种方法  
const deleteFile = (file, index) => {
    const obj = dataAnswer.file.find(item => item.uid == file.uid)
    if (Number(file.satus) < 100 && obj) {
        fileUpload.value.handleRemove(obj)//当前上传的ref  来取值  里面包含了好几个函数   handleRemove() 终止当前正在上传的文件    abort() 终止全部上传未完成的文件
        fileList.value.splice(index, 1)
    } else {
        if (file.url) {
            stuDataAnalysisClean({ url: file.url }).then(res => {
                if (res.code == 200) {
                    ElMessage.success(res.msg)
                    fileList.value.splice(index, 1)
                }

            }).catch(err => {
                // ElMessage.error(err)
            })
        }

    }
}
function fileName(name) {
    const lastIndex = name.lastIndexOf('.');
    const newName = lastIndex !== -1 && lastIndex !== 0 ? name.substring(0, lastIndex) + "." : name;
    return newName
}
const formatWord = (val) => {
    if (val) return val.replace(/\n/g, "<br>");
};
const save = () => {
    let role = localStorage.getItem("role")
    if (role == '5') return ElMessage.warning("子账号无操作权限！");
    if (dataAnswer.answer == '' && dataAnswer.file.length == 0) {
        return ElMessage.error('回答和文件两个必须填写一个，才可保存')
    }
    let fileArr = ref([])
    let isSave=ref(true)
    fileList.value.forEach(item => {
        // let obj = { name: item.name, url: item.url }
        console.log(item.url,"item");
        
        if(!item.url){
            isSave.value=false 
        }
        let obj=reactive({
            name:'',
            url:"",
        })
        obj.name=item.name
        obj.url=item.url
        fileArr.value.push(obj)
    })
    if(!isSave.value){
        ElMessage.warning('文件正在上传中,请稍后保存')
        return
    }
 
    let obj = {
        id: data.operaion[activeIndex.value].id,
        answer: dataAnswer.answer, //回答
        file: fileArr.value //文件
    }
    stuDataAnalysisSave(obj).then(res => {
        if (res.code == 200) {
            ElMessage.success(res.msg)
            getData()
        }
    })

}
//超过10个字变成省略号
function truncateText(text) {
    if (text.length > 10) {
        return text.substring(0, 10) + '...';
    } else {
        return text;
    }
}