vue中上传文件遇到的问题

xiaoxiao2021-02-28  5

vue项目中会遇到上传文件的需求,jquery会有一些插件很方便,如果不使用插件网上的方法没有太容易的而且很多是原生JS或者基于jQuery操作dom结构的。那么在vue项目中如何实现呢,还有如何模拟表单文件提交呢?

这里文件上传文件框的样式美化就不过多赘述了,有很多例子。只介绍一下功能的实现以及注意的问题。

<template>   <div>

<span><a href="javascript:;" class="file_prev">本地上传</a><input type="file" class="preFile" name="staffFile" multiple="multiple" @change="changeFn($event)" v-if="clearShow"></span>

  </div> </template>

其中,multiple="multiple"代表文件可多选;

给文件选择器绑定change事件让它在上传文件后去执行methods里的函数,@change="changeFn($event)" 

changeFn(e){             this.deviceArray = [];             let deviceFile = e.target.files;             let formData = new FormData();             for(let i=0;i<deviceFile.length;i++){               formData.append('file', deviceFile[i]);             }             this.clearShow = false;             let config = {               headers: {                 'Content-Type': 'multipart/form-data'               }             }             this.$axios.post(this.$API.processManage.processAddCheck,               formData, config             ).then((res)=>{               console.log(res);               this.clearShow = true;             },()=>{                 this.clearShow = true;             });           },

使用FormData()模拟表单提交文件,循环e.target.files的文件添加到FormData()中。

表单上传请求头信息headers: {'Content-Type': 'multipart/form-data'}

再使用axios配合发送请求这样上传文件功能就基本实现了。

但是其中遇到一个问题就是change事件触发条件是文件上传框内容改变才可以,每次上传完文件默认是不清空上一次上传的内容的,这样上传同名文件就不会触发change事件。

网上现有的方法就是重置input上传文件的标签的dom结构,在vue里我的实现方法就是v-if去控制。

v-if="clearShow",初始化数据为true,在change事件触发的函数里设置clearShow为false,即移除了该input标签,然后在回调函数中再设置clearShow为true,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。

欢迎交流讨论。

转载请注明原文地址: https://www.6miu.com/read-1600002.html

最新回复(0)