vue上传文件流

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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就可以了。