vue上传组件,vue 上传插件

　　这篇文章主要介绍了某视频剪辑软件中多附件上传的实现示例，帮助大家更好的理解和学习使用某视频剪辑软件框架，感兴趣的朋友可以了解下

前言

　　本篇主要记录在某视频剪辑软件项目中实现附件上传功能，可实现单/多附件上传，识别文件格式并用不同图标展示功能，及控制是否可编辑功能。内容简洁易懂，如有需要可自取。完整代码点击这里点击

核心代码

　　div class=upload-flie-btn

　　div class= BTN提示 @ click= openFileSelect v-show=编辑标志上传附件/div

　　投入

　　style=display: none

　　type=file

　　ref=fileInput

　　倍数=倍数

　　@change=uploadFile

　　/div

　　openFileSelect() {

　　//dispatchEvent向一个指定的事件目标派发一个事件

　　这个参考文献。文件输入。分派事件(新鼠标事件( click ))；

　　}

　　//多附件上传

　　异步上传文件(){

　　让这个=这个

　　this.loading=true

　　//获取上传的文件，如要限制文件上传数量可以

　　//let files=[.这个. refs $ file input . files].拼接(0,极限);

　　//也可以在此处抛出文件数量超出限制的提示

　　let files=[.这个参考文献。文件输入。文件]；

　　如果(!文件!files.length) {

　　返回；

　　}

　　//后端接口地址

　　设url=`url

　　//一起请求后端接口

　　无极。全部(

　　files.slice(0，files.length).地图((文件)={

　　const data=new FormData()；

　　data.append(file ，file)；

　　返回request.post(url，数据，{

　　标题：{

　　"内容类型":"多部分/形式数据",

　　});

　　})

　　).然后((res)={

　　_ this.loading=false

　　_这个参考文献。文件输入。值=null

　　})。catch((err)={

　　控制台。日志(错误)；

　　});

　　}

文件展示部分代码

　　此部分使用了娣组件库，该部分处理了word、excel、ppt、pdf、image、txt格式的文件展示问题，其它类型的文件均展示位"其它",也可以自行更换矢量图，图标字体中可以查找到。遍历的数据字段可根据自己的数据格式进行修改。

　　swipeout v-if=files.length

　　模板v-for=(项目，索引)在文件中

　　向外滑动-item v-bind:key= item。 fileurl :disabled=！编辑标志

　　div slot=右键菜单

　　向外滑动-按钮@ click。native=删除项目(项目。fileurl，index) type=warn 删除/swipeout-button

　　/div

　　div slot= content class= demo-content vux-1px-t

　　div class=file-item

　　a:href= item。URL rel=外部无关注:download= item。filename class= file-look

　　！-话说-

　　差异

　　v-if=item.fileName.indexOf( .doc) 0 item.fileName.indexOf(.docx)”)“0”

　　 class=文件图标

　　挽救(保存的简写)

　　t=1601351611486

　　class=icon

　　viewBox=0 0 1024 1024

　　版本=1.1

　　xmlns= http://www。w3。 org/2000/SVG

　　p-id=1737

　　宽度=200

　　高度=200

　　小路

　　d= m 1024 298.666667v 85.33333333333 c0-25.6-17.066666666667-42.66666666666h 298.66666666666 c-25.6 0-42.66666666717。

　　fill=#41A5EE

　　p-id=1738

　　小路

　　d= m 1024 298.666667h 256v 213.333333 l 405.3333333 85.333333 362.66637-85.333333 z

　　fill=#2B7CD3

　　p-id=1739

　　路径d= m 1024 512h 256v 213.3333 l 384 64 384-64 z fill= # 185 Abd p-id= 1740 /

　　路径(路径)

　　d= m 1024 725.3333h 256v 213.3333 c 0 25.6 17.06666667 42.66667 42.66666h 682.66666 c 25.6 0 42.666667-17.0666667 42.6666-42.66666v-213.3334 z

　　fill=#103F91

　　p-id=1741

　　路径(路径)

　　d= m 588.8 256h 256v 597.3333h 324.26667 c 29.8666667 0 59.733333-29.8666667 59.733333-59.7333333v 307.2 c 0-29.8666667-21.3333-51.2 z

　　不透明=.5

　　p-id=1742

　　路径(路径)

　　d= m 546.1333333 810.666667h 51.2 c 21.3333333 810.66666666666337 0.789.333333333333 0.759.466666666666666 7v 264.5333333333 c 0 234.666666667 21.333333333 333 51.2 51.2 2333333h 43

　　fill=#185ABD

　　p-id=1743

　　路径(路径)

　　d=` m 435.2 682 66667h 371.2 l 298 66667 448 226 1333333 682.6663333333 l 93.866666666667 341.3333333h 59.73333333 l 46.

　　fill= #ffffff

　　p-id=1744

　　/svg

　　/div

　　！- excel -

　　div(消歧义)

　　v-else-if= item。文件名。的索引().xls]0 项目。文件名。的索引(“”).xlsx)0

　　类=文件图标

　　SVG(SVG)

　　t= 1602124050240

　　类=图标

　　viewBox=0 0 1024 1024

　　版本=1.1

　　xmlns= http://www。w3。 org/2000/SVG

　　p-id=1102

　　宽度=200

　　高度=200

　　路径(路径)

　　d=` m 682 66667 42 66667h 298 66667 c-25.6 0-42 66667 17.06666667-42 66667v 213.33634 l 426.66667 213.3363 170.666666 64 170.6666667-64v 298.666667 l-344

　　fill= #21至366

　　p-id=1103

　　路径(路径)

　　d= m 25629866667h 4266667v 213.3333h 256 z

　　fill=#107C41

　　p-id=1104

　　路径(路径)

　　d= m 1024 85.3333v 213.3333h-341.3333v 42.66667h 298.66666 c 21.33333 0 42.66667 21.33333 42.66667 42.66666 z

　　fill=#33C481

　　p-id=1105

　　路径(路径)

　　d= m 682 66667 512h 256v 426 66667 c 0 25.6 17 0666666667 42 666667 42 6666666h 682 666666 c 25.6 0 42 66666667-17 06666667-42 666666v-213.3333341

　　fill=#185C37

　　p-id=1106

　　路径(路径)

　　d= m 588.8 256h 256v 597.3333h 324.26667 c 29.8666667 0 59.733333-29.8666667 59.733333-59.7333333v 307.2 c 0-29.8666667-21.3333-51.2 z

　　不透明=.5

　　p-id=1107

　　路径(路径)

　　d= m 546.1333333 810.666667h 51.2 c 21.3333333 810.66666666666337 0.789.333333333333 0.759.466666666666666 7v 264.5333333333 c 0 234.666666667 21.333333333 333 51.2 51.2 2333333h 43

　　fill=#107C41

　　p-id=1108

　　路径(路径)

　　d= m 145.06666667682.256 512 153.6 341.3333333333333h 81.0666666666 l 55.466666666666 c 8.8 12.8 8 8 12.8 12.8 12.8 25.6 l 33333

　　fill=#FFFFFF

　　p-id=1109

　　小路

　　d= m 682.666667512h 341.33333333h-341.3333333 z

　　fill=#107C41

　　p-id=1110

　　/svg

　　/div

　　！- ppt -

　　差异

　　v-else-if= item。文件名。的索引(.0 item.fileName.indexOf(.pptx)”)“0”

　　 class=文件图标

　　挽救(保存的简写)

　　t=1602124175604

　　class=icon

　　viewBox=0 0 1024 1024

　　版本=1.1

　　xmlns= http://www。w3。 org/2000/SVG

　　p-id=1258

　　宽度=200

　　高度=200

　　小路

　　d= m 968.704 135.168h-430.08v 752.64h 430.08 c 15.36 0 26.624-12.288 26.624-26.624v 162.816 c 0-15.36-11.264-27.648-26.624-27.648 z

　　fill=#FF8A65

　　p-id=1259

　　小路

　　d= M512 646.144h 376.832v 53.248h 512 z m0 107.52h 376.832v 54.272h 512 z m 161.792-483.328 c-89.088 0-161.792 72.704-161.792 161.792 c 512 521.216 584

　　fill=#FBE9E7

　　p-id=1260

　　小路

　　d= m 727.04 216.064v 161.792h 161.792 c 0-89.088-72.704-161.792-161.792-161.792 z

　　fill=#FBE9E7

　　p-id=1261

　　小路

　　d= 592.896 996.352 l 28.672 888.832v 135.168 l 592.896 27.648 z

　　fill=#E64A19

　　p-id=1262

　　小路

　　d= m 319.488 327.68h 192.512v 368.64h 78.848v 569.344h 40.96 c 44.032 0 78.848-11.264 104.448-34.816 25.6-22.528 38.912-53.248 38.912-90.112 c 455

　　fill=#FFFFFF

　　p-id=1263

　　/svg

　　/div

　　！- pdf -

　　div v-else-if= item。文件名。的索引(.pdf ) 0 class= file-icon

　　挽救(保存的简写)

　　t=1602124241991

　　class=icon

　　viewBox=0 0 1024 1024

　　版本=1.1

　　xmlns= http://www。w3。 org/2000/SVG

　　p-id=1536

　　宽度=200

　　高度=200

　　小路

　　d= m 877.874285 926.46424244 a 48.742278 0 1-48.7934347 a 146.7444274 a 48。

　　fill=#EBECF0

　　p-id=1537

　　小路

　　877 . 588868686886至48.742278 48.742278 0 0 1至48 . 2278h 146363863637至48.742278 48.742278 0 1至48-48伏48 . 48484848386486至48 . 48小时48分钟48687 . 486868686686至48.742278.7493

　　fill=#C1C7D0

　　p-id=1538

　　路径(路径)

　　d= m 0.15488 536.372419h 975.358842v 243.813791 a 48.7422727278 0 1-48.7427279 48.742727277h 48.897277 a 48.

　　fill=#FF5630

　　p-id=1539

　　路径(路径)

　　d= m 97.6339436 536.372419v 438.83666663 l 0.15488 536.372419h 97.484458 z m 780.234848 49 0 l 0.972772798-97.53557556h-97.95 z

　　填充= de 350 b

　　p-id=1540

　　路径(路径)

　　d= m 243.96867 585.165897h 84.838188 c 15.51561-0.767679979 30.668687 41.93666966

　　fill= #ffffff

　　p-id=1541

　　路径(路径)

　　d= m 877.874285 312.5777779v 6.809583h-263.83294 a 48.742277278 48.742275 a 48.7422727278 48.742727278 0 0 0 1 34.611 13 14.61 16166

　　fill=#C1C7D0

　　p-id=1542

　　/svg

　　/div

　　！-图像-

　　div(消歧义)

　　v-else-if= item。文件名。的索引().jpg) 0 item.fileName.indexOf().jpeg) 0 item.fileName.indexOf().png ) 0

　　类=文件图标

　　SVG(SVG)

　　t= 1602124262555

　　类=图标

　　viewBox=0 0 1024 1024

　　版本=1.1

　　xmlns= http://www。w3。 org/2000/SVG

　　p-id=1680

　　宽度=200

　　高度=200

　　路径(路径)

　　901.5663 926.72马克至48 617739 48.617739 0 1至48.486486466666至48.617739 48.617739 0 0 1至48-48岁。48674.44444448667至48.617739 48.617739 0 0 0.170 429663 0小时418.86521至49 641739.641739 0 1.34 816 14 336升

　　fill=#EBECF0

　　p-id=1681

　　路径(路径)

　　d= m 901.565663 926.72v 48.6177739 a 48.6177739 0 1-48.617777777739h 170.429663 a 48.61777777739 0 1-48.617777739v-48.48 . 61 77734 . 3746

　　fill=#C1C7D0

　　p-id=1682

　　小路

　　d= m 24.042184 536.576h 975.382261v 243.712 a 48.617739 0 1-48.662261h 72.659923 a 48.617739 0 0 1 24.042184 780v-288 .

　　fill=#3EB7FC

　　p-id=1683

　　小路

　　d= m 121.856445 536.576v 439.296 l 24.576445 536.576 z m 779.798261 0l 1.024-97.28 97.28 97.28 z

　　fill=#2F9CCC

　　p-id=1684

　　小路

　　d= m 905.216445 312.32v 6.6333739h-264.192 a 48.6177739 0 1-48.66262262 61-48.617739 v0a 49.64747 39 0 0 1 34.816 14.3336 l 14.33336 l 2536

　　fill=#C1C7D0

　　p-id=1685

　　小路

　　d= m 354.259923 700.905739 a 87.930435 87.930435 0 1-17.8086986 55 58.757576565 52 0 1-50.710266 61 20.48 67 . 56677

　　fill=#FFFFFF

　　p-id=1686

　　小路

　　d= m 438.806706 709.097739v 67.584h-41.494261v-193.536h 66.56 q 72.2144261 0 72.214261 61.44 a 57.388522 57.388522 0 1-22.0436

　　fill=#FFFFFF

　　p-id=1687

　　小路

　　d= m 723.968445 763.859478 a 138.7297739 138.72977739 0 1-69.6332 16.384 100.886866261 100.8866666261 0 1-73.2399739 94.208 94.208 0 1-26。

　　fill=#FFFFFF

　　p-id=1688

　　/svg

　　/div

　　！- txt -

　　div v-else-if= item。文件名。的索引(.txt ) 0 class= file-icon

　　挽救(保存的简写)

　　t=1602124341675

　　class=icon

　　viewBox=0 0 1024 1024

　　版本=1.1

　　xmlns= http://www。w3。 org/2000/SVG

　　p-id=4641

　　宽度=200

　　高度=200

　　小路

　　d= m 901.632 926.72 c 0 27.136-22.016 48.64-48.64 48.64h 170.496 c-27.136 0-48.64-22.016-48.64-48.64v 48.64 c 121.856 22.016 143.36 0 170.496 0h 44

　　fill=#EBECF0

　　p-id=4642

　　小路

　　d= m 901.632 926.72v 48.64 c 0 27.136-22.016 48.64-48.64 48.64h 170.496 c-27.136 0-48.64-22.016-48.64-48.64v 926.72 c 0 27.136 22.016 48.64 48.64

　　fill=#C1C7D0

　　p-id=4643

　　小路

　　d= m 24.064 536.576h 975.36v 243.712 c 0 27.136-22.016 48.64-48.64 48.64h 72.704 c-27.136 0-48.64-22.016-48.64-48.64v-243.712 z

　　fill=#0A84E8

　　p-id=4644

　　小路

　　 d="M121.856 536.576v-97.28l-97.28 97.28h97.28z m779.776 0l1.024-97.28 97.28 97.28h-98.304z"

　　 fill="#005584"

　　 p-id="4645"

　　 <path

　　 d="M901.632 312.32v6.656h-263.68c-27.136 0-48.64-22.016-48.64-48.64V0c12.8 0 25.6 5.12 34.816 14.336l264.192 263.68c8.704 9.216 13.824 21.504 13.312 34.304z"

　　 fill="#C1C7D0"

　　 p-id="4646"

　　 <path

　　 d="M389.12 589.312v27.648H324.608v169.984H291.84v-169.984H227.328v-27.648H389.12zM466.432 589.312l46.592 69.632 46.592-69.632h39.424l-66.56 95.232 71.168 101.888h-39.424l-50.688-76.288-50.688 76.288h-39.424l70.656-101.888-66.048-95.232h38.4zM798.208 589.312v27.648h-64.512v169.984H701.44v-169.984h-64.512v-27.648h161.28z"

　　 fill="#FFFFFF"

　　 p-id="4647"

　　 </svg>

　　 </div>

　　 <svg

　　 t="1602124370240"

　　 class="icon"

　　 viewBox="0 0 1024 1024"

　　 version="1.1"

　　 xmlns="http://www.w3.org/2000/svg"

　　 p-id="6067"

　　 width="200"

　　 height="200"

　　 <path

　　 d="M688.6 2H120.8c-17.1 0-27.9 12.9-27.9 35.7V1001c0 6.2 14 19.6 27.9 19.6h782.4c17.1 0 27.9-12.9 27.9-19.6V238.3c0-12.9-3.6-16-3.6-19.7L698.9 8.7c0-6.7-3.6-6.7-10.3-6.7z m0 0"

　　 fill="#E7EFF8"

　　 p-id="6068"

　　 <path

　　 d="M93 1010.2c0 5.7 4.7 10.3 10.3 10.3h817.3c5.7 0 10.3-4.7 10.3-10.3V819.6H93v190.6z"

　　 fill="#9FA0A3"

　　 p-id="6069"

　　 <path

　　 d="M340.8 915.4c0-10.1 3.5-18.5 10.5-25.3 7-6.8 15.8-10.1 26.2-10.1 10.4 0 19.2 3.3 26.5 10 7.2 6.7 10.8 15.1 10.8 25.4 0 10.6-3.6 19.2-10.7 25.8-7.2 6.6-16.1 9.8-26.8 9.8-10.3 0-18.9-3.4-26-10.1s-10.5-15.3-10.5-25.5z m128.5 0c0-10.2 3.5-18.7 10.5-25.4 7-6.7 15.8-10 26.2-10 10.4 0 19.2 3.4 26.4 10.1 7.2 6.8 10.7 15.2 10.7 25.3 0 10.6-3.6 19.2-10.7 25.8-7.2 6.6-16 9.8-26.6 9.8-10.3 0-18.9-3.4-26-10.1s-10.5-15.3-10.5-25.5z m128.1 0c0-10.4 3.5-18.8 10.5-25.5s15.8-9.9 26.4-9.9c10.7 0 19.6 3.4 26.7 10.1 7.1 6.8 10.6 15.2 10.6 25.3 0 10.6-3.6 19.2-10.7 25.8-7.2 6.6-16.1 9.8-27 9.8-10.3 0-18.9-3.5-26-10.4s-10.5-15.3-10.5-25.2z"

　　 fill="#FFFFFF"

　　 p-id="6070"

　　 <path

　　 d="M533.7 484.6h-66.8v-23.8c0-18 3.3-33.4 9.9-46.2 6.6-12.7 17.6-25.5 33.1-38.3 17.9-14.7 29.8-26.7 35.7-36.1 5.9-9.4 8.9-19.4 8.9-30.2 0-12.5-4.4-22.4-13.2-29.9-8.8-7.4-21.3-11.1-37.7-11.1-31.7 0-61.2 11.8-88.6 35.4v-77.9c30.2-16.9 62.5-25.3 96.9-25.3 38.6 0 68.7 8.9 90.1 26.6 21.4 17.7 32.1 41.7 32.1 71.9 0 19.4-4.4 37.3-13.2 53.6-8.8 16.4-23.9 33.2-45.3 50.6-18.1 14.3-29.6 25.6-34.5 33.8-5 8.2-7.5 18-7.5 29.5v17.4z m-33.2 36.9c12.8 0 23.8 4.1 32.9 12.4 9.1 8.3 13.7 18.3 13.7 30.1 0 11.5-4.6 21.3-13.7 29.6S513.3 606 500.5 606c-13 0-24-4.2-32.9-12.5-8.9-8.3-13.4-18.2-13.4-29.5 0-11.6 4.5-21.6 13.4-30 9-8.3 20-12.5 32.9-12.5z"

　　 fill="#9FA0A3"

　　 p-id="6071"

　　 </svg>

　　 </div>

　　 <div class="file-name">{{item.fileName}}</div>

　　 </a>

　　 </div>

　　 </swipeout-item>

　　 </template>

　　 </swipeout>

　　以上就是vue中多附件上传的实现示例的详细内容，更多关于vue 多附件上传的资料请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue上传组件,vue 上传插件

目录

前言

核心代码

文件展示部分代码

相关文章阅读