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)


相关推荐

  • vue的$on方法_or指令的作用是

    vue的$on方法_or指令的作用是v-on监听事件可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。事件代码可以直接放到v-on后面,也可以写成一个函数。示例代码如下:<divid

  • 小程序父组件向子组件传值

    小程序父组件向子组件传值子组件:tabs1父组件:demo04先将子组件和父组件直接产生特定的联系,需要在demo04.json里面以键值对的方式添加。添加完毕后在父组件中就可以使用标签,就可以渲染出子组件内容。因为tabs1多次复用,所以数据不能在tabs1.js中写死。一般都是由父组件中data数据传到子组件。1.先在父组件data中添加list数据,data:{list:[{id:“2”,nam…

  • datax(19):源码解读内置Transformer「建议收藏」

    datax(19):源码解读内置Transformer「建议收藏」通过datax(18)已经对transformer有了初步了解,继续撸代码,看datax已经内置的5种简单类型transformer;一、概述目前datax内置了5种常用的transformer,分别如下截取SubstrTransformer填充PadTransformer替换ReplaceTransformer过滤FilterTransformerGroovy类型GroovyTransformer二、SubstrTransformer主要是对record中的column的值进.

  • pycharm安装包说pip版本不对_django库

    pycharm安装包说pip版本不对_django库一、pycharm安装库与pip安装库的区别项目使用哪个解释器,就用哪个解释器下的库:python安装目录解释器就用该目录下的库,项目的解释器就用项目里面的库!而pip安装的库是保存在python安装目录解释器下的。“pip成功,pycharm识别不了”,这就是因为新建项目默认解释器是用“项目的解释器”的,但是pip安装的第三方库是在python安装目录下,所以会识别不了。这里我只把我需要知道的摘下来,具体友情链接:关于pip安装第三方库,但PyCharm中却无法识别的问题;以及PyCharm安装第三

  • Pytest(13)命令行参数–tb的使用

    Pytest(13)命令行参数–tb的使用前言pytest使用命令行执行用例的时候,有些用例执行失败的时候,屏幕上会出现一大堆的报错内容,不方便快速查看是哪些用例失败。–tb=style参数可以设置报错的时候回溯打印内容,可以设置参

  • 河北对口计算机录取分数线_河北对口计算机专科院校名单

    河北对口计算机录取分数线_河北对口计算机专科院校名单技校网专门为您推荐的类似问题答案问题1:2009年河北对口计算机高考分数线360问题2:谁能告诉我湖南职高计算机专业对口升学本科和专科分数线湖南省2010年普通高校职高对口招生录取控制分数线代码专业门类本科专科71师范44820072种植54473养殖52374机电56675电子电工50676计算机55877建筑48278旅游48981…

发表回复

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

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