vue上传文件流

vue上传文件流创建formData方法,把文件流以及所有需要上传的数据通过formData.append传入formData中,上传请求中的data中只需要放一个formData就可以了。(此处request为封装的请求方法,省事可以不封装)

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

创建formData方法,把文件流以及所有需要上传的数据通过formData.append传入formData中,上传请求中的data中只需要放一个formData就可以了。

(此处request为封装的请求方法,省事可以不封装)

import axios from "axios"

export function request(config){
  const require = axios.create({
    method:config.method || 'post',
    baseURL:'/api/ebook/lan',//你的接口
    timeout:10000,
    headers:config.method ||{'Content-Type': 'application/json;charset=utf-8'},
    data:config.data,
    withCredentials:true
  })

  return require(config)
}


主菜:

<template>
  <div class="flex">
    <button type="text" @click="dialogFormVisible = true" class="addBtn">添加</button>
    <el-dialog title="数据添加" :visible.sync="dialogFormVisible" width="600px" :before-close="close">
      <el-form :model="partyFlag" ref="partyFlag">
        <el-form-item prop="description" label="姓名或描述:" :label-width="formLabelWidth" :rules="[{ required: true, message: '不能为空'},{ type:'' ,message: '请输入非数字类型'}]">
          <el-input type="description" autocomplete="off" placeholder="请输入" v-model.number="partyFlag.description"></el-input>
        </el-form-item>
        <el-form-item label="文件:" :label-width="formLabelWidth" :rule="{ required: true, message: '请上传图片' }">
          <div class="upload">
            <input type="file" autocomplete="off" placeholder="选择上传文件" class="uploadFile" @change="File"></input>
            <div class="fileNameShow">{
  
  {file.name}}</div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="uploadBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {request} from "../../../../network/request";

export default {
  name: "dataAdd",
  data(){
    return{
      file:[name=''],
      dialogFormVisible:false,
      formLabelWidth: '120px',
      // 表单验证验证的必须是数组
      partyFlag:{
        imgPath:'',
        description:''
      },
    }
  },
  methods:{
    File(event){
        this.file = event.target.files[0]
    },
    uploadBtn() {
      this.$refs.partyFlag.validate((valid) => {//表单验证
        if (valid) {
          // 写接口
          if(this.file64 === '') {
              this.$message('请先上传文件')
          }else {
            let formData = new FormData()//创建formdata来存文件
            let file = this.file
            formData.append("file",file)//存入文件
            formData.append('nId',0)//存入需要和文件一起上传的数据
            request({
              url:'/partyFlag/addData.dao',//写你的路径
              data:formData//只需要上传formdata就行了
            }).then(res =>{
              this.dialogFormVisible = false
              this.partyFlag.imgPath = ''
              this.partyFlag.description = ''
              this.file64 = ''
              this.file = []
              this.$message('添加成功')
            }).catch(err =>{
              this.$message('请求或者网络异常')
            })
          }
        } else {
          return false;
        }
      });
    },
    close(){
      this.dialogFormVisible=false
      this.partyFlag.imgPath = ''
      this.partyFlag.description = ''
      this.file64 = ''
      this.file = []
    }
  },
}
</script>

<style scoped>
.flex{
 flex:3.5;
}
.addBtn{
  width: 80px;
  height: 30px;
  background-color:#7EC0EE;
  border-radius: 0;
  border-width: 0;
  color: #FFFFFF;
  font-size: 12px;
  margin: 23px 0 15px 30px;
}
.upload{
  width: 400px;
  height: 90px;
  border: solid 1px #EBEBEB;
}
.uploadFile{
  width: 100px;
  height: 90px;
  opacity: 0;
}
.fileNameShow{
  position: absolute;
  top: 5px;
  left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width:350px;
}
</style>

注:这种方法是上传文件的如果上传的文件的同时也需要上传一个参数的话,就把参数和文件一起放在formdata中,然后只上传formdata就可以了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181182.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 阿里笔试题-选择_阿里笔试题

    阿里笔试题-选择_阿里笔试题如下函数,在32bit系统foo(2^31-3)的值是:Int foo(int x){Return x&-x;}答案解析:2^31-3&-2^31-3=2^((31-3)&(-2))^(31-3)=2^(28&(-2))^28=2^28^28=2^0=2

  • 可访问性级别的C# 修饰符

    使用访问修饰符public、protected、internal或private可以为成员指定以下声明的访问级别之一。http://keleyi.com/a/bjad/3ccfqh95.htm

    2021年12月21日
  • hbase解决海量图片存储

    hbase解决海量图片存储随着互联网、云计算及大数据等信息技术的发展,越来越多的应用依赖于对海量数据的存储和处理,如智能监控、电子商务、地理信息等,这些应用都需要对海量图片的存储和检索。由于图片大多是小文件(80%大小在数MB以内),以GFS、HDFS为代表的适用于流式访问大文件的分布式存储系统,若直接用来存储图片,由于元数据膨胀,在扩展性和性能方面均存在严重问题。   为了解决HDFS在小文件存储方面的问题,通

  • 在线问诊小程序源码_诊前服务

    在线问诊小程序源码_诊前服务专家门诊——JSP开发答疑200问[华储网推荐]    

  • 在Pycharm中使用git工具「建议收藏」

    在Pycharm中使用git工具「建议收藏」在Pycharm中使用git工具File->settings->versioncontrol->git;然后从双击.gitignore文件会让你安装git的插件,安装完成重启IED。此时你的项目应该已经在版本控制之中。所以你有提交的内容,先commit,然后选择版本库中的分支push就可以了。

  • 几款主流好用的markdown编辑器介绍

    几款主流好用的markdown编辑器介绍Markdown编辑器 Markdown其实在2004年就有了,不过之前一直很小众,这几年随着相关应用平台的发展,Markdown以其独到的优势迅速火起来了。Markdown编辑器使用一套格式标记语言来对文档内容进行排版和格式显示。而Markdown的标记很少,常用的也就十个左右,它是一种非常轻量的标记语言。 Markdown编辑器深受技术人员的喜爱,Markdown可以用来编写说明…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号