AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Element_文件上传&&多个文件上传

2024-04-11 163
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Element_文件上传&&多个文件上传

官网：https://element-plus.gitee.io/zh-CN/component/upload.html

单个文件上传

<template>
<el-upload
        ref="upload"
        action=" /object/radr/ballistic/localBallisticConvert"
        :data="uploadData"
        :before-upload="(file)=>{
          beforeUpload(file)
        }"
        :show-file-list="false"
      accept=".json"
    >
    <el-button
      type="primary"
      :disabled="isAction"
    >
      加载文件2
    </el-button>
    </el-upload>
</template>
<script lang="ts" setup>
import {
   
    ref } from 'vue'
import type {
   
    UploadInstance } from 'element-plus'
const uploadData = ref({
   
   
      file:null,
      latitude:null,
      launchDirection:null,
      localBallistic:null,
      longitude:null,
  });
const fileName = ref()
function beforeUpload(file){
   
   
       fileName.value = file.name,
        uploadData.value.file= file
 }
</script>

多文件上传

在ElementPlus中有手动上传的方法，具体实现是点击手动上传后，将多个文件进行单个上传，会触发多次请求

<template>
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">select file</el-button>
    </template>

    <el-button class="ml-3" type="success" @click="submitUpload">
      upload to server
    </el-button>

    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>
<script lang="ts" setup>
import {
   
    ref } from 'vue'
import type {
   
    UploadInstance } from 'element-plus'

const uploadRef = ref<UploadInstance>()

const submitUpload = () => {
   
   
  uploadRef.value!.submit()
}
</script>

action="https://run.mocky.io" 请求 URL
headers 设置上传的请求头部
method 设置上传请求方法
multiple 是否支持多选文件
data 上传时附带的额外参数
name 上传的文件字段名
with-credentials 支持发送 cookie 凭证信息 boolean false
show-file-list 是否显示已上传文件列表 boolean true
drag 是否启用拖拽上传 boolean false
accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） string
on-preview 点击文件列表中已上传的文件时的钩子 (uploadFile: UploadFile) => void
on-remove 文件列表移除文件时的钩子 (uploadFile: UploadFile, uploadFiles: UploadFiles) => void
on-success 文件上传成功时的钩子 (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void
on-error 文件上传失败时的钩子 (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void
on-progress 文件上传时的钩子 (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void
on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 (uploadFile: UploadFile, uploadFiles: UploadFiles) => void
on-exceed 当超出限制时，执行的钩子函数 (files: File[], uploadFiles: UploadFiles) => void —
before-upload 上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。 (rawFile: UploadRawFile) => Awaitable
before-remove 删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。 (uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable
file-list / v-model:file-list 默认上传文件 UploadUserFile[] []
list-type 文件列表的类型 'text' | 'picture' | 'picture-card' 'text'
auto-upload 是否自动上传文件 boolean true
http-request 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求 (options: UploadRequestOptions) => XMLHttpRequest | Promise —
disabled是否禁用上传 boolean false
limit 允许上传文件的最大数量 number

1、我的思路

  • 需求
    • 想要将多个文件一起上传【备注：多个按钮上传多个文件，然后一起提交】

  • 问题

    • 预期效果
      在这里插入图片描述

    • 在提交之后默认将文件格式转换成了[object File]，而不是（binary），因此使用单个文件单个上传
      在这里插入图片描述

  • 思路

    • 使用上传文件之前的钩子before-upload，在第一个文件要上传时返回false停止上传
    • 在第二个按钮点击上传时将上传文件之前的钩子before-upload的返回值为true，开始上传。
  • HTML
    <el-upload
     ref="upload"
     action=" /object/radr/ballistic/localBallisticConvert"
     :data="uploadData"
     :before-upload="(file)=>{
         return beforeUpload(file,'file1')
     }"
     :show-file-list="false"
    accept=".txt"
 >
 <el-button
   :disabled="isAction"
 >
 加载文件1
</el-button>
</el-upload>
<el-upload
     ref="upload"
      action=" /object/radr/ballistic/localBallisticConvert"
      :data="uploadData"
      :before-upload="(file)=>{
        beforeUpload(file,'file2')
      }"
      :show-file-list="false"
    accept=".json"
  >
  <el-button
    type="primary"
    :disabled="isAction"
  >
    加载文件2
  </el-button>
</el-upload>
  • JS 
    function beforeUpload(file,FLAG){
     
     
 if(FLAG ==='file1'){
     
     
     fileName.value.file1Name = file.name,
      uploadData.value.file1= file
 }
   if(FLAG === 'file2'){
     
     
      fileName.value.file2Name = file.name,
      uploadData.value.file2= file
 }
return FLAG === 'file2' ? true :false
}

2、优化思路一

在网上搜索多篇文章之后，继续优化了我的思路
这里不通过submit去提交，通过自己定义方法提交需要用到new FormData()对象，不了解FormData的朋友可以点击这里 FormData
，用element自带的on-change和on-remove可以很方便获取到fileList，最后把获取到的formData在通过接口传递即可
引用来自：https://blog.csdn.net/wangyile4399/article/details/111315799

  • HTML

      <template>
      <el-upload
              class="pop-upload"
              ref="upload"
              action=""
              :file-list="fileList"
              :auto-upload="false"
              :multiple="true"
              :on-change="handleChange"
              :on-remove="handleRemove"
      >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </el-upload>
  </template>
  • 参数信息在这里插入图片描述
  • action参数必填，这里不走el-upload的默认上传，所以用不到这个地址，填空即可，因为是用自己封装方法提交，所以用不到on-success和on-error方法。

  • JS

      <script>
      import request from "@/utils/request"    // 此处为请求的封装方法，没有引用可以忽略
      export default {
     
     
          data() {
     
     
              return {
     
     
                  fileList: [],   // 定义一个空数组
              };
          },
          methods: {
     
     
              // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
              handleChange(file, fileList) {
     
     
                  this.fileList = fileList
              },
              // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
              handleRemove(file, fileList) {
     
     
                  this.fileList = fileList
              },
              //上传服务器
              submitUpload() {
     
     
                  //判断是否有文件再上传
                  if (this.fileList.length === 0) {
     
     
                      return this.$message.warning('请选取文件后再上传')
                  }
                  // 下面的代码将创建一个空的FormData对象:
                  const formData = new FormData()
                  // 你可以使用FormData.append来添加键/值对到表单里面；
                  this.fileList.forEach((file) => {
     
     
                      formData.append('file', file.raw)
                  })
                  // 添加自定义参数，不传可删除
                  formData.append('parentId', '49')
                  formData.append('uploadType', '备料单')
                  formData.append('versions', 'v4.0')

                  //自定义的接口也可以用ajax或者自己封装的接口
                  request({
     
     
                      method: 'POST',
                      url: '/uploadFile',   //填写自己的接口
                      data: formData        //填写包装好的formData对象
                  }).then(res => {
     
     
                      if (res.data.code == 200) {
     
     
                          this.$message.success('上传成功');
                      } else {
     
     
                          this.$message.error('上传失败');
                      }
                      //清空fileList
                      this.fileList = []
                  })
              },
          },
      };
  </script>

    3、优化思路二

    控制判断文件个数是否等于 fileList 的长度是否相等，相等再上传。
    引用来自：https://blog.csdn.net/qq_36022463/article/details/122723998

  • HTML
    在这里插入图片描述
  • JS
    在这里插入图片描述
    每次选择文件的时候设置为0 ，将最初的fileList存起来
    在这里插入图片描述
    不然每一个文件都会执行on-change，都会初始化fileList，就不能根据fileList判断是否有这个文件
    在这里插入图片描述

3、优化思路三

借助FormData的格式向后台传文件组

  • HTML
```html
 <div class="upload-file">
  <el-upload
      accept=".xlsx"
      ref="upload"
      multiple
      :limit="5"
      action="http://xxx.xxx.xxx/personality/uploadExcel"
      :on-preview="handlePreview"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :http-request="uploadFile"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上传到服务器
      </el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过100m</div>
  </el-upload>
 </div>
```

  • 修改:auto-upload="false"属性为false，阻止组件的自动上传
    :http-request="uploadFile"覆盖上传事件
    @click=“submitUpload”，给上传按钮绑定事件

  • JS
    ```js
    data() { 

      return {
      fileData: '',  // 文件上传数据（多文件合一）
      fileList: [],   // upload多文件数组
      uploadData: {
        fieldData: {
          id: '', // 机构id,
        }
      },
  }

    }

methods:{
        // 上传文件
        uploadFile(file) {
            this.fileData.append('files', file.file);  // append增加数据
        },

        // 上传到服务器
         submitUpload() {
                let fieldData = this.uploadData.fieldData;  // 缓存，注意，fieldData不要与fileData看混
                if (fieldData.id === '') {
                    this.$message({
                        message: '请选择上传机构',
                        type: 'warning'
                    })
                } else if (this.fileList.length === 0) {
                    this.$message({
                        message: '请先选择文件',
                        type: 'warning'
                    })
                } else {
                    const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
                    if (!isLt100M) {
                        this.$message.error('请检查，上传文件大小不能超过100MB!');
                    } else {
                        this.fileData = new FormData();  // new formData对象
                        this.$refs.upload.submit();  // 提交调用uploadFile函数
                        this.fileData.append('pathId', fieldData.id);  // 添加机构id
                        this.fileData.append('loginToken', this.loginToken);  // 添加token
                        post(this.baseUrlData.url_02 + ":8090/personality/uploadExcel", this.fileData).then((response) => {
                            if (response.data.code === 0) {
                                this.$message({
                                    message: "上传成功",
                                    type: 'success'
                                });
                                this.fileList = [];
                            } else {
                                this.$message({
                                    message: response.data.desc,
                                    type: 'error'
                                })
                            }
                        });
                    }
                }
            },

            //移除
            handleRemove(file, fileList) {
                this.fileList = fileList;
                // return this.$confirm(`确定移除 ${ file.name }？`);
            },

            // 选取文件超过数量提示
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },          

              //监控上传文件列表
            handleChange(file, fileList) {
                let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
                if (existFile) {
                    this.$message.error('当前文件已经存在!');
                    fileList.pop();
                }
                this.fileList = fileList;
            },
}
```
  • 案例
    在这里插入图片描述

原生js实现

<!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>
    .file {
   
   
      position: relative;
      display: inline-block;
      background: #133d63;
      border: 0.1rem solid #99d3f5;
      border-radius: 0.2rem;
      padding: 0.2rem 0.6rem;
      overflow: hidden;
      color: #f0faff;
      text-decoration: none;
      text-indent: 0;
      line-height: 1.5rem;
      font-size: 0.8rem;
      margin-left: 7rem;
    }

    .file input {
   
   
      position: absolute;
      font-size: 0.8rem;
      right: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }

    .file:hover {
   
   
      background: #aadffd;
      border-color: #78c3f3;
      color: #004974;
      text-decoration: none;
    }

  </style>
</head>

<body>
  <div class="file">
    上传文件
    <input type="file" name="image" accept="image/*" onchange="upload()">
  </div>
  <script type="text/javascript">
    function upload (event) {
   
   
      var e = window.event || event;
      console.log(e)
      // 获取当前选中的文件
      var File = e.target.files[0];
      console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了

      var data = new FormData();
      data.append("file", File)
      let refreshToken = localStorage.getItem("token");
      axios
        .post(
          "http://202.101.162.69:8089/proxy/top/api/upload/oss",
          data,
          {
   
   
            headers: {
   
   
              Authorization: refreshToken,
            },
          }
        )
        .then((res) => {
   
   
          if (res.data.code == 200) {
   
   
            this.$message({
   
   
              message: "上传文件成功",
              type: "success",
              center: "true",
              duration: 500,
              customClass: "press",
            });
          } else {
   
   
            this.$message({
   
   
              message: "上传文件失败",
              type: "warning",
              center: "true",
              duration: 500,
              customClass: "press",
            });
          }
        })
    }


  </script>
</body>

</html>

在这里插入图片描述

文章标签：
JavaScript
前端开发
博客zhu虎康
目录
相关文章
清雨小竹
|
C#
C#文件上传
C#文件上传
清雨小竹
63 0
路卿老师
|
27天前
|
存储 PHP 文件存储
32 单文件上传
路老师分享PHP文件上传教程，涵盖配置php.ini、使用$_FILES变量和move_uploaded_file()函数等关键步骤，帮助你轻松实现单文件上传功能。纯干货，技术知识分享。
路卿老师
30 1
墨城coding
|
1月前
|
Java
smartupload文件上传！
使用 `smartupload.jar` 实现文件上传和下载。首先将 `smartupload.jar` 添加到项目中，然后创建上传页面，确保表单使用 `POST` 方法并设置 `enctype=&quot;multipart/form-data&quot;`。接着在服务器端通过 `SmartUpload` 对象处理文件上传，保存文件到指定目录，并获取表单中的其他数据。最后，实现文件下载功能，设置响应头以触发浏览器下载文件。
墨城coding
38 0
向画
|
7月前
|
JSON 数据格式
文件上传~~
文件上传~~
向画
47 0
小宋1021
|
4月前
|
前端开发 JavaScript 数据库
多个文件上传
多个文件上传
小宋1021
34 0
程序员三木
|
JavaScript 前端开发 移动开发
浅谈文件上传
浅谈文件上传
程序员三木
60 1
浅谈文件上传
掘金防诈骗集团CEO
|
存储 移动开发 JavaScript
H5文件上传
H5文件上传
掘金防诈骗集团CEO
191 0
程序员朱永胜
文件上传
文件上传
程序员朱永胜
44 0
coleak
|
安全 应用服务中间件 PHP
[SUCTF 2019]CheckIn(文件上传)
[SUCTF 2019]CheckIn(文件上传)
coleak
186 0
萝卜头不吃萝卜头
|
JavaScript
文件上传限制以及element 和 element accept上传使用
前言 大家好，今天和大家分享一下上传文件如何实现上传限制，在制作项目时会遇见需要上传文件的功能，比如上传图片，上传音频，上传视频等等。但是点击上传文件打开文件夹时，文件夹内有好多格式的图片或音频，这个时候为了方便就可以进行文件格式的限制，只显示要上传的文件类型，下面我们来看看如何实现这个功能。
萝卜头不吃萝卜头
650 0