vue使用formData传递文件类型的数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<el-dialog title="导出指定体检信息" :visible.sync="dialogVisibleexptbyfile" width="50%" center :append-to-body="true">

      <div class="submit">

        <el-form :model="form" label-width="130px" label-position="left">

          <el-form-item label="xxx">

            <el-select v-model="form.type" placeholder="请选择类型">

              <el-option label="xxx" value="0"></el-option>

              <el-option label="xxx" value="1"></el-option>

            </el-select>

          </el-form-item>

          <el-form-item label="选择文件">

            <el-upload class="upload-demo" :limit="1" :on-exceed="exceedfile" :headers="{headers: 'multipart/form-data'}" action="#" :on-change="onChangefile" :before-upload="beforeuploadfile" :auto-upload='false' :file-list="fileList">

              <el-button size="small" type="primary">点击上传</el-button>

            </el-upload>

            <!-- <input type="file" id="file" ref="file" @change="selectFile"> -->

          </el-form-item>

          <el-form-item label="xxxxxx">

            <el-input v-model="form.sheetIndex" style="width: 52%;"></el-input>

          </el-form-item>

          <el-form-item label="xxx">

            <el-input v-model="form.startRow" style="width: 52%;"></el-input>

          </el-form-item>

          <el-form-item label="xxxx">

            <el-input v-model="form.colNum" style="width: 52%;"></el-input>

          </el-form-item>

        </el-form> 

      </div>

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisibleexptbyfile = false">取 消</el-button>

        <el-button type="primary" @click="exptbyfile">确 定 导 出</el-button>

      </span>

</el-dialog>

data () {

    return {

      // 弹框显示和隐藏

      dialogVisibleexptbyfile: false,

      form: {

        type: '',

        sheetIndex: '1',

        colNum: '1',

        startRow: '1'

      },

      fileList: [],

      file: null

    };

}

1

2

3

<el-upload class="upload-demo" :limit="1" :on-exceed="exceedfile" :headers="{headers: 'multipart/form-data'}" action="#" :on-change="onChangefile" :before-upload="beforeuploadfile" :auto-upload='false' :file-list="fileList">

     <el-button size="small" type="primary">点击上传</el-button>

</el-upload>        

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

import {Utils} from 'xxxxxxxx'

methods： {

     onChangefile (file) {

      // file文件改变

      var testmsg = file.name.substring(file.name.lastIndexOf('.') 1)

      //这里我需要上传表格文件，所以做了限制

      if (['xls', 'xlsx'].indexOf(testmsg.toLowerCase()) == -1) {

        this.$message.warning('只能上传.XLS.XLSX格式的文件!')

        this.fileList.shift()

        return

      }

      //将选取的文件拿到，这里需要根据自己业务来写

      this.fileList[0] = file

      this.file = file.raw

      this.filename = file.name

    },

    // 只允许上传一个文件

    exceedfile () {

      this.$message.warning('只能上传一个文件，请删除后添加！')

    },

    beforeuploadfile (file) {

      // console.log("beforeupload", file)

      this.file = file

    },

    // 指定下载文件 

    exptbyfile () {

      if (this.fileList.length == 0) {

        this.$message.warning('请上传文件');

        return

      }

      if (this.form.type == "") {

        this.$message.warning('请选择类型');

        return

      } 

      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加

      formData.append('file', this.file) //添加文件对象 ，data中设置的

      //调用上传接口

      let userinfo = User.getData("userInfo");

      var params = {

        // 一些参数 XXXXX

        type: this.form.type

      };

      // console.log(this.file);

       // 直接掉用方法即可

      Utils.upload(this.file, "xxxxxxx", params)

    },

}       

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

function upload (res, url, params = {}) {

  return new Promise((resolve) => {

    var formData = new FormData(); 

    formData.append("file", res);

    for (var i in params) {

      formData.append(i, params[i]);

    } 

    $.ajax({

      url: baseURl url,

      type: "POST",

      data: formData,

      cache: false, //上传文件无需缓存 

      processData: false, //用于对data参数进行序列化处理 这里必须false ~~~~~~重点一定要写

      contentType: false, //必须*/ // ~~~~~~重点一定要写 

      success: function (data) {        console.log(data)

        if (data.code == 0) {

          resolve(data.data);

        } else {

          showTis("上传错误，请联系管理员", 'error')

        }

      },

    });

  })

}

export default {

    upload

}

1

2

3

4

5

6

7

var formData = new FormData();

//大部分情况下，使用formData追加数据，是通过append() Api来进行追加

formData.append(key,value)

//取出追加的值

formData.get(key)

//修改值

formData.set(key,newVale)

1

2

3

4

5

<form id="myForm">

    <p>name：<input type="text" name="name"  value="xiaolong"></p>

       <p>age：<input type="text" name="age"  value="23"></p>

    <p><input type="button" id="btn" value="添加"></p>

</form>

1

2

3

4

5

6

7

8

9

var btn=document.querySelector("#btn");

btn.onclick=function(){

    //获取表单元素

    var form=document.querySelector("#myForm");

    //初始化表单

    var formdata=new FormData(form);

    //此时可以进行一个操作，获取或者设置表单的值或者直接提交整个表单

    console.log(formdata.get("name"));//xiaolong

}

1

2

formData.get('age')//获取一个key为age的值

formData.getAll('age')//获取全部key为age的数据

1

2

3

4

5

6

7

8

this.$axios({

    method: "post",

    url: `你的请求地址`,

    data: formD,//这个是我的fromdata

    headers: {

    transformRequest: [data => data]//此处是我进行设置的转换数据类型

    }

})