zoukankan      html  css  js  c++  java
  • 【Vue】vue+axios+FormData上传多个文件

    html

    一般网页上传文件大家都会用到这个标签

    <input type="file" id="file_input"/>

    我们可以通过这个标签选取文件,使用js进行文件上传等操作,同时,该标签同时可以选取多个文件:

    <input id="upload_file" type="file" multiple @change="v_upload_files"/>

    但有些时候,进行其他操作的时候,用户需要获得文件夹路径,那么这种写法可以用该标签选取文件夹

    <input type="file" id="file_input" webkitdirectory directory />

    使用ant-design的upload组件时获得文件夹路径的方式:

    <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
        <a-button> <a-icon type="upload" /> Upload Directory </a-button>
    </a-upload>

     注意input file 是不支持v-model的,因为v-model是双向数据绑定,而input file里面的文件只能通过点击选取来进行变更。

    js

    v_upload_files(e) {
      let files = e.target.files
      let formData = new FormData()
      // formData重复的往一个值添加数据并不会被覆盖掉,可以全部接收到,可以通过formData.getAll('files')来查看所有插入的数据
      for (let i = 0;i < files.length;i++) {
        formData.append('files', files[i])
      }
      let url = '/files/uploadfiles'
      let headers = {
        'Content-Type': 'multipart/form-data'
      }
      axios.post(url, formData, {headers: headers})
    }

    需要注意的是请求头需要设置为'Content-Type': 'multipart/form-data'

    参照:https://juejin.cn/post/6844903934469865485

    参照:https://blog.csdn.net/shi_6_tians/article/details/103750752

  • 相关阅读:
    Shell 函数
    Shell 流程控制
    Shell test 命令
    Shell echo命令
    python 类、模块、包的区别
    postgresql vacuum table
    ssh连接断开后 shell进程退出
    ubuntu 搭建 svn服务器,使用http方式访问
    如何查看apache加载了哪些模块
    maven 的使用
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14678500.html
Copyright © 2011-2022 走看看