最近工作中接到一个需求,需要上传一个文件材料,提交时传给后端。使用的框架是Vue

<template>
<div>
<input type="file" @change="inputFileChange">
<button type="primary" size="mini" @click="clicks">上传<button>
</div>
</template>

以下为逻辑部分(JavaScript的部分)

<script>
import submitfile from "xxxxxx" //要传的后端接口
export default {
data () {
return {
files:''
}
},
methods: {
inputFileChange(e){
this.files = e.target.files[0] //当input中选择文件时触发一个事件并让data当中的files拿到所选择的文件
},
click() {
if(!this.files){
console.log('请选择文件')
return
let fd = new FormData()
fd.append('file',this.files)
submitfile(fd).then(res => { }) }
}
}
</script>

以上是主要的代码,还可以对input所选择的文件进行筛选,可以设置选择文件的类型。

只能选择Excel文件的代码为如以下:

 <input
ref="fileInput"
type="file"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
@change="handleFileUpload"
>

可以定义input的accept属性限制更多的文件类型

还有分享一个自己踩过的坑:

1.不能将files直接当成给接口传的参数,要用formdata

2.定义接口文件中,要注意post接口的传参类型(要注意是不是data)

Vue 上传材料并传给后端接口(使用input)的更多相关文章

  1. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  2. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  3. vue 上传进度显示

    参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...

  4. vue上传大文件控件

    文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹.今天研究了一下这个问题,在 ...

  5. vue上传大文件的解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  6. 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

    目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7 ...

  7. 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)

    现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...

  8. Vue-cli中axios传参的方式以及后端取的方式

    0917自我总结 Vue-cli中axios传参的方式以及后端取的方式 一.传参 params是添加到url的请求字符串中的,用于get请求. data是添加到请求体(body)中的, 用于post请 ...

  9. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

随机推荐

  1. Laravel 5.4 快速开发简书:

    Laravel 5.4 快速开发简书第1章 课程介绍 介绍课程的大体脉络和课程安排 第2章 Laravel 5.4介绍 本节课会带领大家介绍laravel的各个版本历史以及讨论php框架的未来发展趋势 ...

  2. 03.Django基础三之视图函数

    一 Django的视图函数view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错 ...

  3. 14 (OC)* UIView和UILayer

    总接来说就是如下几点: 1:每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提供.两者都有树状层级结构,layer ...

  4. Kubernetes学习之k8s

    k8s是什么 云原生 越来越多的开发者不仅使用容器作为应用部署和运行的载体,还积极使用了与容器这个应用载体天生匹配的微服务的架构,并依靠容器调度编排引擎的帮助,以保持对外部的敏捷性,这种容器化的微服务 ...

  5. linux初学者小记

    a开头的小命令 alias命令 # echo=' - - - ' > /sys/class/scsi_host/host0/scan这条命令是咱们在给虚拟机装了一块新的硬盘后,在不关机的前提下扫 ...

  6. CF #579 (Div. 3) A.Circle of Students

    A. Circle of Students time limit per test2 seconds memory limit per test256 megabytes inputstandard ...

  7. Anaconda基本认识

    Anaconda Distribution是执行Python数据科学和机器学习最简单的方法. 它包括250多种流行的数据科学软件包,以及适用于Windows,Linux和MacOS的conda软件包和 ...

  8. redirectTo、navigateTo与switchTap区别

    老是记忆不大清楚,简单写一下 简单作区分就是: redirectTo:关闭当前页(卸载),跳转到指定页 navigateTo:保留当前页(隐藏),跳转到指定页 switchTap:只能用于跳转到tab ...

  9. eclipse配置workspace背景颜色

  10. Fresco添加HTTP请求头

    项目中用Fresco来管理图片由于服务器图片有不同的版本需要根据客户端的屏幕密度来选择不同的图片共享一份用OkHttp下载图片并添加HTTP头代码. public class OkHttpNetwor ...