文件上传相关知识

i小杨

已于 2024-08-22 15:19:28 修改

阅读量135

点赞数

文章标签： javascript vue.js

于 2023-09-19 11:44:13 首次发布

本文链接：https://blog.csdn.net/i_Satan/article/details/133021106

版权

文件上传

参考文章@平井缘

要点 1:

示例一个 FormData() 对象.

要点 2:

将上传时获取到的 file 文件 append 到 formdata 对象中.

要点 3:

配置上传接口的请求头.

方式一:表单提交文件(原生)

<el-button @click="getFile" style="margin-top: 10px">
  <i class="el-icon-upload"></i>&nbsp;{{$i18n.t('CLICK_UPLOAD')}}
</el-button>
<input
  type="file"
  ref="file"
  style="display: none;"
  v-on:change="handleFileUpload($event)"
/>

获取 file 文件

let formData = new FormData();
let file = this.$refs.file.files[0];
formData.append(file, file);
// 调用接口

postUpload(formData).then(() => {});

上传接口配置请求头

// 文件上传
export function postUpload(file) {
  return axios({
    url: "upload",
    method: "post",
    data: file,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}

方式二: Elementui 封装的组件提交文件(vue)

注意: 上传接口需要配置请求头

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :http-request="onUpload"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

// 上传文件
onUpload (file) {
    let formData = new FormData()
    formData.append('file',file.file)
    postUpload(formData).then((res) => {
       console.log(res)
        this.$message.success(this.$t('UPLOAD_SUCCESS'))
    }).catch((e) => {
        this.$message.error(e.message)
    })
},

多个文件一次请求上传 (手动调用文件上传接口）

获取 on-change 事件的第二个参数 fileList. （获取到所有需要上传的文件）
手动点击按钮触发 submit 方法（写一个提交&上传按钮，手动触发/调用文件上传接口）
创建 FormData 对象，遍历 fileList 数组，将文件对象添加到 formData 中（将文件对象添加到 formData 中）
调用上传接口

参考文章@wangyile4399

<template>
  <div class="uploadFiles">
    <el-upload
      class="upload-demo"
      action="#fake"
      :on-change="handleChange"
      multiple
      :limit="limitNum"
      :http-request="onUpload"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">选取文件</el-button>
      <span style="margin-left: 10px; vertical-align: bottom"
        >已选中{{ this.requestFileList.length }}个文件</span
      >
    </el-upload>
    <el-button size="small" type="primary" @click="issueHistoryTableUploadFn"
      >确认上传</el-button
    >
  </div>
</template>

<script>
  import API from "@/utils/API"; // 此处为请求的封装方法，没有引用可以忽略
  export default {
    data() {
      return {
        fileList: [], // 定义一个空数组
        requestFileList: [],
      };
    },
    methods: {
      // 文件上传 change 事件，获取到所有需要上传的文件
      handleChange(file, fileList) {
        this.requestFileList = fileList;
      },
      // 确认上传按钮触发的事件
      issueHistoryTableUploadFn() {
        this.fileUploadLoading = true;

        // 关键代码
        let formData = new FormData();
        this.requestFileList.forEach((file) => {
          formData.append("files", file.raw);
        });
        // 调用上传接口
        API.postUpload(formData)
          .then((res) => {
            this.$message.success("上传成功");
          })
          .catch(() => {
            this.$message.warning("上传失败");
          });
      },
    },
  };
</script>

javascript 实现文件上传的相关知识

文件上传相关知识点：

input 添加 type=‘file’ 属性即可选取电脑本地的文件。
input 添加 multiple 可以实现多文件上传
input 添加 webkitdirectory mozdirectory odirectory 这些属性可以实现文件夹上传

拖拽上传相关知识点

相关监听事件

div.ondragenter = ()=>{}
div.ondragtop = ()=>{}
div.ondraop = ()=>{}

相关代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .upload-area {
        width: 100%;
        height: 300px;
        border: 1px solid tomato;
        border-radius: 30px;
      }
    </style>
  </head>
  <body>
    <input type="file" multiple />
    <!-- 拖拽上传 -->
    <div class="upload-area"></div>
    <script>
      const uploadArea = document.querySelector(".upload-area");
      /*
        默认情况下,div是不支持 文件拖拽到元素上.所以需要组织默认行为.
      */

      uploadArea.ondragenter = (e) => {
        // 当有文件被拖拽进入div元素时,就会触发该事件
        e.preventDefault();
      };
      uploadArea.ondragover = (e) => {
        // 只要有文件一直在div元素上,就会一直触发该事件
        e.preventDefault();
      };
      uploadArea.ondrop = (e) => {
        // 当文件在上传区域 松开鼠标时,触发该事件.

        e.preventDefault();
        // e.dataTransfer.items 可以得到拖拽进 上传区域了多少个文件.
        for (const item of e.dataTransfer.items) {
          // 调用 webkitGetAsEntry() 方法 获取拖拽进上传区域文件的相关属性
          let FileEntry = item.webkitGetAsEntry();
          fileRecursion(FileEntry);
        }
        // console.log(e.dataTransfer.items)
      };
      // 使用递归 循环遍历
      function fileRecursion(FileEntry) {
        if (FileEntry.isDirectory) {
          // 目录
          const reader = FileEntry.createReader();
          reader.readEntries((directoryEntry) => {
            directoryEntry.map((fileEntry) => fileRecursion(fileEntry));
          });
        } else {
          // 文件
          FileEntry.file((t) => {
            console.log("file对象", t);
          });
        }
      }
    </script>
  </body>
</html>