vue3 + js 最简单的文件上传 文件排序 异步上传

于 2024-05-11 16:15:00 发布
阅读量148 收藏
点赞数 4
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50526617/article/details/138718845
版权

1、图示 可拖动排序

2、主代码块1

              <van-uploader
                multiple
                v-model="fileList"
                :after-read="afterRead"
                :preview-image="false"
                accept="audio/*"
                upload-icon="plus"
                upload-text="选择音频"
              >
                <van-button icon="plus" type="primary" size="small">
                  选择音频
                </van-button>

3、主代码块2

 <van-cell-group inset>
          <van-cell title="上传专辑列表（拖动排序）">
            <template #right-icon>
              <van-button
                plain
                size="small"
                type="primary"
                hairline
                @click="sortByName"
              >
                按名称排序
              </van-button>
              <van-button
                plain
                size="small"
                type="primary"
                hairline
                @click="sortBySize"
              >
                按大小排序
              </van-button>
            </template>
          </van-cell>
          <draggable
            :list="fileList"
            ghost-class="ghost"
            :force-fallback="true"
            :group="{ name: 'list', pull: 'clone' }"
            item-key="id"
          >
            <template #item="{ element, index }">
              <div class="item move">
                <label class="move">
                  <van-cell>
                    <template #title>
                      <span class="custom-title">
                        {{ index + sort + 1 }}
                        <van-icon name="music-o" style="padding: 2px" />
                        <span>{{ element.file.name }}</span>
                      </span>
                    </template>

                    <template #right-icon>
                      <div
                        style="
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          padding: 3px;
                        "
                      >
                        <van-icon
                          v-show="element.file.showDelete"
                          name="delete"
                          color="red"
                          @click="deleteFile(element.file, index)"
                        />

                        <van-loading size="14" v-show="element.showLoading" />
                        <van-icon
                          name="success"
                          style="color: #07c160"
                          v-show="element.showSuccess"
                        />
                        <van-icon
                          name="cross"
                          style="color: red"
                          v-show="element.showError"
                        />
                      </div>
                    </template>
                  </van-cell>
                </label>
              </div>
            </template>
          </draggable>
          <van-cell>
            <template #title>
              <van-button
                type="success"
                v-show="showOk"
                size="small"
                block
                plain
                round
                link
                :to="{
                  path: 'episodes',
                  query: { albumId: albumId },
                }"
                >完成(点击查看专辑列表)</van-button
              >
              <van-button
                plain
                style="float: right"
                v-if="showUpload"
                @click="clickPromise"
                type="success"
                size="small"
                block
                round
              >
                <van-icon name="back-top" />点击上传
                <span style="color: red; font-size: 10px">
                  (共{{ fileList.length }}个文件)
                </span>
              </van-button>
            </template>
          </van-cell>
        </van-cell-group>

4、完整代码  html部分

<template>
  <div>
    <div>
      <div style="margin-top: 10px; margin-bottom: 10px">
        <van-cell-group inset>
          <van-cell>
            <template #title>
              <van-uploader
                multiple
                v-model="fileList"
                :after-read="afterRead"
                :preview-image="false"
                accept="audio/*"
                upload-icon="plus"
                upload-text="选择音频"
              >
                <van-button icon="plus" type="primary" size="small">
                  选择音频
                </van-button>
              </van-uploader>
              <!-- 自定义开始集数： -->
              
              <!-- <van-stepper v-model="sort" theme="round" button-size="22" /> -->
            </template>
            <template #right-icon> </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div>
        <van-cell-group inset>
          <van-cell title="上传专辑列表（拖动排序）">
            <template #right-icon>
              <van-button
                plain
                size="small"
                type="primary"
                hairline
                @click="sortByName"
              >
                按名称排序
              </van-button>
              <van-button
                plain
                size="small"
                type="primary"
                hairline
                @click="sortBySize"
              >
                按大小排序
              </van-button>
            </template>
          </van-cell>
          <draggable
            :list="fileList"
            ghost-class="ghost"
            :force-fallback="true"
            :group="{ name: 'list', pull: 'clone' }"
            item-key="id"
          >
            <template #item="{ element, index }">
              <div class="item move">
                <label class="move">
                  <van-cell>
                    <template #title>
                      <span class="custom-title">
                        {{ index + sort + 1 }}
                        <van-icon name="music-o" style="padding: 2px" />
                        <span>{{ element.file.name }}</span>
                      </span>
                    </template>

                    <template #right-icon>
                      <div
                        style="
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          padding: 3px;
                        "
                      >
                        <van-icon
                          v-show="element.file.showDelete"
                          name="delete"
                          color="red"
                          @click="deleteFile(element.file, index)"
                        />

                        <van-loading size="14" v-show="element.showLoading" />
                        <van-icon
                          name="success"
                          style="color: #07c160"
                          v-show="element.showSuccess"
                        />
                        <van-icon
                          name="cross"
                          style="color: red"
                          v-show="element.showError"
                        />
                      </div>
                    </template>
                  </van-cell>
                </label>
              </div>
            </template>
          </draggable>
          <van-cell>
            <template #title>
              <van-button
                type="success"
                v-show="showOk"
                size="small"
                block
                plain
                round
                link
                :to="{
                  path: 'episodes',
                  query: { albumId: albumId },
                }"
                >完成(点击查看专辑列表)</van-button
              >
              <van-button
                plain
                style="float: right"
                v-if="showUpload"
                @click="clickPromise"
                type="success"
                size="small"
                block
                round
              >
                <van-icon name="back-top" />点击上传
                <span style="color: red; font-size: 10px">
                  (共{{ fileList.length }}个文件)
                </span>
              </van-button>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <div style="margin: 20px">
      <span style="font-size: 12px; color: grey">
        *注：<br />1、上传连续音频<br />2、点击选择音频<br />3、可以拖拽排序或自行选择排序方式<br />4、点击上传音频
      </span>
    </div>
  </div>
  <van-overlay :show="showOverlay">
    <div class="wrapper" @click.stop>
      <div class="block" />
    </div>
    <van-loading
      vertical
      style="
        display: flex;
        justify-content: center;
        height: 100vh;
        width: 100wh;
      "
    >
      <template #icon>
        <van-icon name="star-o" size="30" />
      </template>
      正在上传，请稍等...
    </van-loading>
  </van-overlay>
</template>

 5、完整代码 js部分

<script setup>
import Draggable from "vuedraggable";
import { ref } from "vue";
import { uploadAlbum } from "../../api/index";
import "vant/lib/uploader/style";
import { useRoute } from "vue-router";
import router from "../../router";

components: {
  Draggable;
}

const route = useRoute();
const onClickLeft = () => history.back();
const toManageHome = () =>
  router.push({
    path: "/manage",
  });

const fileList = ref([]);
const albumId = route.query.albumId;
const albumName = route.query.albumName;
const sort = parseInt(route.query.sort);
const showOverlay = ref(false);
const showUpload = ref(false);
const showOk = ref(false);


function handleFileChange(e) {
  fileList.value = [...fileList.value, ...e.target.fileList];
  e.target.value = ""; // 清空input的值，以便可以重复选择文件
}

// 根据文件名排序
function sortByName() {
  fileList.value.sort((a, b) => a.file.name.localeCompare(b.file.name));
}
// 根据大小排序
function sortBySize() {
  fileList.value.sort((a, b) => a.file.size - b.file.size);
}
// 删除
const deleteFile = (file, index) => {
  fileList.value.splice(index, 1);
};
// 选完文件加几个按钮
const afterRead = (file) => {
  showUpload.value = true;
  // 如果是多文件，file会是数组
  const files = Array.isArray(file) ? file : [file];

  console.log("文件：", files);
  // 将文件添加到FormData
  files.forEach((item, index) => {
    item.file.showLoading = false;
    item.file.showSuccess = false;
    item.file.showError = false;
    item.file.showDelete = true;
    console.log("item.file", item.file);
    // formData.append("sorts", index + sort + 1);
  });
};

const tasks = ref([]);
// 异步任务
const clickPromise = async () => {
  console.log("进入", fileList.value);
  //tasks
  fileList.value.forEach((ele, index) => {
    tasks.value.push(
      () =>
        new Promise(async (resolve) => {
          fileList.value[index].showLoading = true;
          fileList.value[index].file.showDelete = false;
          let formDataPro = new FormData();
          formDataPro.append("file[]", ele.file);
          formDataPro.append("albumId", albumId);
          console.log("执行");

          try {
            const response = await uploadAlbum(formDataPro);

            console.log("返回值", response);
            if (response.data.code == 0) {
              showSuccessToast({message:response.data.data,className: 'particulars-detail-popup'});
              // showOverlay.value = false;

              fileList.value[index].showLoading = false;
              fileList.value[index].showSuccess = true;
            } else {
              showFailToast({message:response.data.msg,className: 'particulars-detail-popup'});
              fileList.value[index].showLoading = false;
              fileList.value[index].showError = true;
              // showOverlay.value = false;
            }
          } catch (e) {
            showFailToast({message:response.data.msg,className: 'particulars-detail-popup'});
            fileList.value[index].showLoading = false;
            fileList.value[index].showError = true;
          }

          resolve();
        })
    );
  });

  executeSequentialTasks();
};
// 异步执行
const executeSequentialTasks = async () => {
  showUpload.value = false;
  for (const task of tasks.value) {
    await task();
  }
  showOk.value = true;
};
</script>

 参考文献：vant4官方文档    axios官方文档

阿离a
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element实现大文件上传
07-04
vue+element实现大文件上传
微信小程序电商实战课程SpringBoot2+Vue3(85到96讲)
最新发布
04-09
本套课程采用主流技术栈实现，Mysql数据库，SpringBoot2+Mybatis Plus后端，微信小程序原生实现，Vue3.2+Element Plus实现后台管理。基于JWT技术实现前后端分离。 微信小程序端涵盖了axios异步请求，Promise应用，swiper组件，自定义组件，应用了微信小程序提供的登录，支付，地址管理，包括下拉滑动分页，less应用，以及结合SpringBoot后端实现了企业级微信小程序支付功能，为了方便教学，采用ngrok实现映射本机IP，开发环境演示真实支付功能。 电商的后台管理采用了主流的Vue3.2+Element Plus组件 实现，涵盖了axios+Promise工具类封装，自定义icon，vuex应用，router路由，路由守卫，使用了大量的Element Plus组件，如表格，分页，图片上传，下拉框，二级联动，Form表单，rules验证框架，dialog以及第三方vue-quil富文本组件等。
Vue3中通过 input 标签 发送文件/图片给后端
qq_59181609的博客
08-13 8481
获取 input 节点的 files 属性以及上传文件/图片的业务逻辑与请求发送都放在了 input 事件回调函数中进行。通过 FormData 实例对象处理 二进制 文件/图片（以下代码展示上传一张图片）。元素身上存在一个 files 属性，其中包含了所有已选择的文件，1.将 input 标签的 type 属性设置为 file。的方式上传到服务器上，或者通过 Javascript 的。2.绑定 ref 绑定并获取该标签的DOM节点。3.绑定事件，处理文件/图片上传的后续逻辑。设置 input 标签。...
vue循环压缩图片后多张一起上传的异步解决
weixin_43281240的博客
11-22 666
beforeAvatarUpload() {//上传前的钩子 return new Promise((resolve) => { let that = this; async function dbFuc() { for (let i = 0; i < that.File_List.length; i++) { let isLt2M = that.File_List[i].size / 1024 /...
vue3中使用wangEditor上传图片
weixin_63443072的博客
09-12 1003
【代码】vue3中使用wangEditor上传图片。
vue3图片上传---vant
A12536365214的博客
12-10 291
废话不多说以下就是上传的代码，换成自己的接口，cv走就可以用。
vue的el-upload上传图片（多选上传，怎么拿到最后一张上传结束状态）(表单提交，异步上传问题)
zhj1329000的博客
05-31 2612
本来是单选上传，接口也是单对单，后来改了需求，要求多选上传，在不让后端改接口的情况下实现了图片的多选上传，主要是on-success是异步提交，无法拿到最后一张上传完成状态，后来换了一种方法实现的。 html部分 <div class="screenFrame"> <!-- 图片上传 --> <div class="screenFrame-top"> <el-upload
Vue3·Uploader 文件上传
qq_51463650的博客
02-21 210
上传文件有上传组件和主文件，
vue3+van-uploader上传图片，不管失败还是成功，图片都是会显示
liuyanger_的博客
11-08 608
可以在上传图片函数中，通过file.status和file.message使用加载loading过渡。van-uploader上传图片，组件自带预览图片，不管失败还是成功，都会展示图片。
vue+element ui实现图片上传并拖拽进行图片排序
LingHuzh的博客
01-10 1073
vue+element ui实现图片上传并拖住进行图片排序
vue+springboot 大文件上传
01-23
使用springboot+vue技术，实现分片 快速上传
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
node+vue实现文件上传功能
01-19
本文实例为大家分享了node+vue实现文件上传的具体代码，供大家参考，具体内容如下 *后端* const express = require('express'); const Router = express.Router(); const multer = require('multer'); const fs = ...
vue3+wangEditor5自定义上传音频+视频
07-05
wangEditor5用在Vue3中自定义扩展音频、视频、图片菜单；并扩展音频元素节点，保证音频节点的插入、读取、回写功能正常；支持动态修改尺寸
关于vant组件库中uploader组件使用心得
qq_44307861的博客
10-12 2457
vue3 vant组件库
Spring Boot+VUE分片上传大文件到OSS服务器解决方案
wujize的博客
07-07 3203
根据项目需要，在很多地方都需要将超大文件上传到服务器，特别是将视频文件上传到云平台的OSS服务器上，这种需求在项目中已经是十分普遍的需求了。在网上收集了很多资料，基本上都只有JAVA到OSS服务器，或都VUE服务端到Spring Boot服务器。当前前后端开发已经十分普及了，大文件一般都保存到OSS服务器，不会保存到自己的主页服务器，OSS大文件服务器+tomcat为业务服务器+VUE/Ract/小程序前端服务器的三层后台架构是当前最主流的架构设计，因此必须解决这个问题。
用Vue&ElementUI Upload组件实现自定义顺序上传
热门推荐
Challenge Next Challenge
01-04 1万+
产品要求： 最多选择100个文件 每张图最大2M 需要给出每张图上传的结果：成功从列表中删除，失败提示网络错误，大于2m也需要提示 支持重试 遇到的问题： upload组件不支持多文件顺序上传，如果一次性上传100张图，压力有点大 不支持顺序上传的原因，在elementui的源码中，手动调用submit方法时，会过滤status为ready的file，然后开始上传过程，上传过程异步，就会...
vue后台Element-ui实现图片上传后拖拽排序
qq_61869009的博客
10-03 1339
在组件下面先局部引入拖拽组件vuedraggable，import draggable from 'vuedraggable';3.定义组件接收参数，上传图最大值，宽，高，圆角，回显数组，然后监听当前数组值变化再传递给父组件。项目基于vue2，element2，vuedraggable2，话不多说直接开整。直接在项目components下面创建组件名为uploadImg。2.使用element的upload组件，创建mystyle对样式穿透动态修改。4.在父组件使用，按钮提交作校验成功拿到数组数据。
vue3+ts多文件上传
09-15
在Vue3中使用TypeScript进行多文件上传，你可以按照以下步骤进行操作： 1. 首先，创建一个文件上传组件。你可以使用`custom-upload`组件，并通过`v-model`绑定一个表单项，用于存储上传的文件列表。在`<script>`标签中，引入需要的接口类型和API封装方法。 ```javascript <template> <custom-upload v-model="formInline.attachmentResultList" :attr="attrResult" /> </template> <script> import { ref } from 'vue'; // 引入Vue3的ref方法 import { uploadFile } from '@/api'; export default { setup() { const formInline = ref({ attachmentResultList: [] }); const attrResult = ref({ id: 'fileUploadId', name: 'attachmentName', limit: 999, readonly: true }); return { formInline, attrResult }; } }; </script> ``` 2. 在API文件中，定义多文件上传的方法`uploadFile`。该方法接收一个`FormData`类型的参数，用于包含上传的文件数据。通过调用`http.upload`方法，并指定上传文件的URL路径和请求头，实现文件上传功能。 ```javascript // api.ts import http from '@/api'; import { UPLOAD_FILE } from '@/api/config/servicePort'; export const uploadFile = (params: FormData) => { return http.upload<Upload.ResFileList>(UPLOAD_FILE + '/file/uploadFile', params, { headers: { 'Content-Type': 'multipart/form-data' } }); }; ``` 3. 定义文件上传的接口类型。根据你的需求，可以根据接口返回的数据定义相应的类型。 ```javascript // interface.ts export namespace Upload { export interface ResFileList { id: string; fileName: string; fileUrl: string; uploadTime: string; operator: string; fileType: string; fileSize: number; fileOldname: string; } } ``` 通过上述步骤，你就可以在Vue3中使用TypeScript实现多文件上传的功能了。在你的组件中，用户可以选择多个文件进行上传，并且上传成功后，文件相关的信息将会被保存在`formInline.attachmentResultList`中，你可以根据业务需求进行进一步处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值