Excel上传 excel的上传其实分为两步： 1、下载excel模板 2、上传excel模板 在项目中涉及到excel的业务，基本上都要先下载excel模板，用户根据下载的模板填写excel信息，然后将信息上传到后台。下面就这两部分别说明： 1、下载excel模板 关于下载excel模板的内容请看：调用后台接口实现Excel导出功能以及导出乱码问题解决（点击直达） 2、上传excel模板 这里用到element 的上传组件，element上传组件提供点击上传和拖动文件上传。 这里是将element的上传组件进行二次封装，该组件的职责就是负责接受上传的文件、上传地址、上传类型，做通用化处理，在任何需要上传功能的页面引入即可使用，下面将组件拆开来讲： :data ：element的上传组件允许我们在上传的时候携带上传参数，这里的 :data 就是上传携带的参数，该参数由父组件提供（主要业务），这样就可以在多种不同情况下使用，避免参数固定化。 :action：请求地址，这个请求地址就是后台的接口，但是这个接口不能直接使用，需要在接口前加 process.env.VUE_APP_BASE_API 来判断当前的运行环境。 :acceptType: 接受文件的类型，例如这里上传 .xlsx 文件，那么点击上传的时候，只会读取系统里 .xlsx 的文件。该类型也是由父页面提供，这样可以区分多种文件上传情况，该组件可以适配多种文件类型，例如：.jpg、.png、.xlsx、.mp4等。 :headers：请求头，需要加上token才能成功上传。 这些就是组件的一些事件以及属性，根据element文档阅读即可，这里带一下： limit：最大上传文件数 on-exceed：上传文件超出最大数时的钩子，可以做错误提示 file-list：上传文件的数组 before-remove：上前的事件 on-progress： 上传中的事件，该事件在上传过程中会持续调用，可以用来做进度条展示。 on-success：上传成功的事件，当接口返回200，触发该事件。 on-error: 上传失败的事件，当接口返回500，触发该事件。 页面中的使用 通过父组件将自身业务所需的参数传入到上传组件中，具体的上传业务由组件完成，完成后将结果返回给父组件展示或者刷新展示列表。 图片和视频 上文中上传excel的组件，其实已经可以用作图片和视频上传了，我们只需要传入对应的图片或视频接口 actionUrl ，然后将对应的上传类型 acceptType：'.mp4'提供给组件，在选择文件时就只读取.mp4的文件，然后将上传所需的参数 uploadData 提供给组件，那么图片和视频上传就已经完成了。 上传图片和视频并不需要模板，直接上传即可，所以会比较方便。其实上传文件都是将文件转成file文件或者formData，将文件传给后端即可。 如果你要在formData上追加参数，只需要： 上传的错误提醒以及逻辑处理 某些情况下，我们需要对上传文件做逻辑处理，比如上传失败该如何处理、上传成功如何处理、能上传几个文件、将上传文件的列表做删除、上传中的进度处理等，这些逻辑，组件都提供了对应的钩子，如下： 上传失败，在文件展示这里将字体变为红色 上传进度处理 element上传组件帮我们关联了上传进度，从发送请求到请求发送成功，其实这个过程只是将file文件转formData请求接口的过程，真实的文件处理进度并不能通过自带的进度条直接展示，需要调用后端的接口获取上传进度，遍历后端提供的上传进度接口，使用定时器，每隔一段时间调用一次，获取最新的上传进度，当上传进度为100%时停止定时器。 以上就是JS实现Excel文件与图片视频上传的详细内容，更多关于JS文件上传的资料请关注脚本之家其它相关文章！