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

于 2024-05-11 16:15:00 发布
阅读量253 收藏
点赞数 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
关注
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 1138
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
upgrade_bro的博客
08-21 2568
2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！
vue.js异步上传文件前后端实现代码
10-19
主要为大家详细介绍了vue.js异步上传文件前后端的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中通过post方式异步上传文件
热门推荐
xjun0812的博客
03-13 1万+
功能需求：根据后台接口需求，需通过异步的方式post提交上传文件，并根据返回的信息作出相应的提示。页面已提前写好了，如下：思路分析：1、创建一个FormData空对象，然后使用append方法添加key/value。选择formData是因为formData传输的数据格式和表单通过submit()方法传输的数据格式一样。添加key/value之后如果打印FormData只会得到一个空对象，但是不影...
前端 vue + vant 实现文件上传
m0_73478445的博客
01-02 2787
前端上传文件一般都是通过 FormData 来实现的，FormData 对象用以将数据编译成键值对，以便用来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 （keyed data），而独立于表单使用。也可以单独用于文件上传，只要遵循使用规范就可以。链接：FormData 的基本使用1. 创建一个实例2. 新增键值对3. 删除某个键值对formData.delete(name) // name 是要删除的键4. 获取一个迭代器，这个迭代器中包含所有键值对5. 获取某个键值对。
前后端分离同步/异步实现文件上传(boot+vue+elementUI)
CoderX(远离Bug)的博客
08-02 3594
前后端分离同步/异步实现文件上传(boot+vue+elementUI)
vue+elementui + Spring boot项目实现文件上传下载
qq_38599266的博客
04-01 3379
使用表单文件上传组件el-upload,通过:action绑定上传文件的api,此处我们将auto-upload设置为true,实现异步上传。前端需要显示图片，可以直接将存入数据库的url放入图片标签的url中，浏览器会自动去服务器获取图片并显示出来。基于vue+elemenui的带来的前后端分离模式，实现文件图片上传服务器，下载到本地等操作。后端实现：此处我们将图片或文件直接存储在服务器D盘符下的fileUpload目录下。存入数据库，到时候读取图片直接通过路径读取。
Spring Boot+VUE分片上传大文件到OSS服务器解决方案
wujize的博客
07-07 3543
根据项目需要，在很多地方都需要将超大文件上传到服务器，特别是将视频文件上传到云平台的OSS服务器上，这种需求在项目中已经是十分普遍的需求了。在网上收集了很多资料，基本上都只有JAVA到OSS服务器，或都VUE服务端到Spring Boot服务器。当前前后端开发已经十分普及了，大文件一般都保存到OSS服务器，不会保存到自己的主页服务器，OSS大文件服务器+tomcat为业务服务器+VUE/Ract/小程序前端服务器的三层后台架构是当前最主流的架构设计，因此必须解决这个问题。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3204
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
vue2+vue3
weixin_43460646的博客
11-15 985
本博客主要为coderwhy的Vue2网课 + 尚硅谷Vue2+Vue3网课，所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马、尚硅谷老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！
vue中实现上传文件给后台实例详解
12-01
FormData 对象的使用： 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件。 （ps：说白了就是不使用form表单实现form表单提交数据或文件，如果还是不懂，请自行百度） 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后台的全部实例内容，感谢大家对软件开发网的支持。
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
10-16
主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue文件上传组件
weixin_45525177的博客
11-28 389
最近遇见一个需要上传百兆大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。
文件上传服务器、文件展示等异步问题
最新发布
qq_45747074的博客
04-22 302
文件上传模块：当文件已经上传完成，文件进度已经走完了，但是服务器响应还没有返回结果，出现了，获取不到上传后的文件路径，需要等待服务器返回结果后，才能获取文件路径并点击跳转到指定的下载地址。2.前端阻塞：当没有服务器没有返回结果的时候，前端手动阻塞 进度条的进度 为 95%，当文件服务器返回结果后，然后手动将进度条置为 100%；【时机：文件进度已经100%了但是服务器返回结果还没有返回、获取不到跳转地址】1.区分有跳转链接和没有链接的text 文本的颜色。【下面为部分 核心代码】
Vue3·Uploader 文件上传
qq_51463650的博客
02-21 388
上传文件有上传组件和主文件，
vue 使用vant Uploader 文件上传
weixin_40918145的博客
08-27 9218
直接上代码 data() { return { filePath: '', fileList: [], } }, <van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png" v-model="fileList" :max-count="1"></van-uploader> // 读取文件 onRea
vue后台Element-ui实现图片上传后拖拽排序
qq_61869009的博客
10-03 1733
在组件下面先局部引入拖拽组件vuedraggable，import draggable from 'vuedraggable';3.定义组件接收参数，上传图最大值，宽，高，圆角，回显数组，然后监听当前数组值变化再传递给父组件。项目基于vue2，element2，vuedraggable2，话不多说直接开整。直接在项目components下面创建组件名为uploadImg。2.使用element的upload组件，创建mystyle对样式穿透动态修改。4.在父组件使用，按钮提交作校验成功拿到数组数据。
vue3.0 移动端二次封装van-uploader上传图片组件
Smile_666666的博客
04-28 2914
vue3.0 移动端二次封装van-uploader上传图片组件 1、前提：业务需求，最多上传6张图片，并可以实现本地预览 2、解决方法：使用vant组件库中的van-uploader实现 3、代码实现 template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v
vue3图片上传---vant
A12536365214的博客
12-10 585
废话不多说以下就是上传的代码，换成自己的接口，cv走就可以用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值