vue-simple-uploader 文件上传 分片上传 [直接上手]

最新推荐文章于 2024-06-13 09:50:52 发布
最新推荐文章于 2024-06-13 09:50:52 发布
阅读量2.2k 收藏 4
点赞数 2
分类专栏： 技术栈入门 文章标签： vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47971654/article/details/108049385
版权

大家阅读前请最好阅读一下官方文档，了解一下各个参数的作用。
好了，话不多说，上码！

一、前端
　　1.安装：npm install vue-simple-uploader --save

2.使用：在main.js中

在这里插入图片描述

3.创建一个上传页面，我这里假定为uploadFile.vue了

<template>
  <div>
    <interviewBack />
    <div>
      <uploader
        :options="options"
        :file-status-text="statusText"
        class="uploader-example"
        ref="uploader"
        @file-success="fileSuccess"
        style="width: 100%;"
      >
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <p>欢迎来到上传录音界面</p>
          <uploader-btn>选择录音</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </div>
  </div>
</template>

<script>
import interviewBack from '@/views/interview/interviewBack'
export default {
  data() {
    return {
      recording: {},
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target: "http://10.31.37.2:8080/upload/upload",
        testChunks: false, //不校验
        chunkSize: '10240000'
      },
      statusText: {
        success: "上传成功",
        error: "上传失败",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中"
      }
    };
  },
  components:{
    interviewBack
  },
  methods: {
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      console.log(message);
      //将面试邀请code和文件路径去保存到数据库中
      var href = location.href;
      var split = href.split("?");
      var invCode = split[1];
      this.recording.invCode = invCode;
      this.recording.recordingUrl = message;
      // this.$ajax
      //   .post(
      //     "http://localhost:8080/interview/recording/saveFileData",
      //     JSON.stringify(this.recording),
      //     {
      //       headers: {
      //         "Content-Type": "application/json;charset=UTF-8"
      //       }
      //     }
      //   )
      //   .then(response => {
      //     if ("ok" == response.data) {
      //       console.log("上传成功");
      //     } else {
      //       alert("上传失败");
      //     }
      //   })
      //   .catch(function(error) {
      //     alert("上传失败");
      //     console.log(error);
      //   });
    }
  },
  mounted() {
    // 获取uploader对象
    this.$nextTick(() => {
      window.uploader = this.$refs.uploader.uploader;
    });
  }
};
</script>

<style>
.uploader-example {
  width: 100%;
  padding: 15px;
  margin: 50px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

二、后端
　　1.控制层controller

package org.btz.ic.controller;
 
 import java.io.PrintWriter;
 
 import javax.annotation.Resource;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
 import org.btz.ic.serviceImpl.UploadService;
 import org.btz.ic.utils.UploadUtils;
 import org.btz.ic.utils.Uploader;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.ResponseBody;
 /**
  * 
  * @author haoze
  *
  */
 @CrossOrigin
 @Controller
 @RequestMapping("/upload")
 public class UoloadController {
     
     @Resource
     private UploadService uploadService;
     
     @ResponseBody
     @RequestMapping(path = "/upload2", method = RequestMethod.POST)
       public void upload(HttpServletRequest request, HttpServletResponse response){
         new UploadUtils().upload(request);
         this.success(response, "上传成功!");
       }
     
     
     public void success(HttpServletResponse response, Object obj){
         PrintWriter writer = null;
         try {
            writer = response.getWriter();
             writer.write(obj.toString());
         } catch(Exception e){} finally{
           if( writer != null ){
             //writer.close();
           }
         }
       }
     
     /**
      * 分片上传
      * @param request 前台发送过来的文件内容
      * @param response 响应给前台文件路径
      * @throws Exception
      */
     @RequestMapping(value = "/upload", method = RequestMethod.POST)
     public void upload2(HttpServletRequest request, HttpServletResponse response) throws Exception{
         final String[] filepath = {""};
         final String[] or_filename = {""};
         try{
             uploadService.post(request, new Uploader.UploadListener() {
                 @Override
                 public void callback(String status, String filename, String original_filename, String identifier, String fileType) {
                     if(status != null){
                         System.out.println(filename);
                     }
                     filepath[0] =filename;//文件上传的路径带走
                     or_filename[0] =original_filename;//源文件名称带走
                 }
                 });
         }catch(Exception e){
             e.printStackTrace();
         }
         //这句话的意思，是让浏览器用utf8来解析返回的数据
         response.setHeader("Content-type", "text/html;charset=UTF-8");
         //这句话的意思，是告诉servlet用UTF-8转码，而不是用默认的ISO8859
         response.setCharacterEncoding("UTF-8");
         response.getWriter().append(filepath[0]+"---"+ or_filename[0]);
     }
 
 //    @RequestMapping("/saveFileData")
 //    public String saveFileData(@RequestBody Recording recording){
 //        try {
 //            recordingService.saveFileData(recording);
 //            return "ok";
 //        } catch (Exception e) {
 //            return "no";
 //        }
 //    }
 
 }

2.service 类 代码内路径为存储上传文件的地址

 package org.btz.ic.serviceImpl;
 
 import org.btz.ic.utils.Uploader;
 import org.springframework.stereotype.Service;
 
 @Service
 public class UploadService extends Uploader{
   public UploadService(){
     super("F:/tmp/","file");
   }
 }

3.上一个工具类吧哈哈哈

package org.btz.ic.utils;
 
 import java.io.File;
 import java.io.IOException;
 import java.util.Iterator;
 
 import javax.servlet.http.HttpServletRequest;
 
 import org.springframework.web.multipart.MultipartFile;
 import org.springframework.web.multipart.MultipartHttpServletRequest;
 import org.springframework.web.multipart.commons.CommonsMultipartResolver;
 
 public class UploadUtils {
     
     public String upload(HttpServletRequest request) {
         String path = "F:/tmp/";
         CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
                 request.getSession().getServletContext());
         if (multipartResolver.isMultipart(request)) {
             MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
             Iterator<String> iter = multiRequest.getFileNames();
             while (iter.hasNext()) {
                 // 一次遍历所有文件
                 MultipartFile file = multiRequest.getFile(iter.next().toString());
                 if (file != null) {
                     String p = path + "/" + file.getOriginalFilename();
                     // 上传
                     try {
                         file.transferTo(new File(p));
                         return p;
                     } catch (IllegalStateException e) {
                         e.printStackTrace();
                     } catch (IOException e) {
                         e.printStackTrace();
                     }
                 }
             }
         }
         return null;
     }
 }

 package org.btz.ic.utils;//Uploader.java
  
  
  import org.apache.commons.io.FilenameUtils;
  import org.springframework.web.multipart.MultipartFile;
  import org.springframework.web.multipart.MultipartHttpServletRequest;
  import org.springframework.web.multipart.commons.CommonsMultipartResolver;
  
  import javax.servlet.http.HttpServletRequest;
  import java.io.*;
  import java.util.Iterator;
  
  //https://github.com/simple-uploader/Uploader/blob/develop/samples/Node.js/uploader-node.js
 /**
  * 断点续传
  * 
  * @author jwj
  *
  */
 public class Uploader {
     /**
      * 临时文件夹
      */
     private String temporaryFolder;
     /**
      * 最大文件大小
      */
     private Integer maxFileSize = 524288000;
     // private String fileParameterName;
 
     public Uploader(String temporaryFolder, String fileParameterName) {
         this.temporaryFolder = temporaryFolder;
         File file = new File(temporaryFolder);
         if (!file.exists()) {
             file.mkdirs();
         }
         // if (fileParameterName == null) {
         // this.fileParameterName = "file";
         // } else {
         // this.fileParameterName = fileParameterName;
         // }
     }
 
     public String cleanIdentifier(String identifier) {
         return identifier.replaceAll("[^0-9A-Za-z_-]", "");
     }
 
     public String getChunkFilename(int chunkNumber, String identifier) {
         identifier = cleanIdentifier(identifier);
         return new File(temporaryFolder, "jwj-" + identifier + '-' + chunkNumber).getAbsolutePath();
     }
 
     public String validateRequest(int chunkNumber, int chunkSize, int totalSize, String identifier, String filename,
             Integer fileSize) {
         identifier = cleanIdentifier(identifier);
 
         if (chunkNumber == 0 || chunkSize == 0 || totalSize == 0 || identifier.length() == 0
                 || filename.length() == 0) {
             return "non_uploader_request";
         }
         int numberOfChunks = (int) Math.max(Math.floor(totalSize / (chunkSize * 1.0)), 1);
         if (chunkNumber > numberOfChunks) {
             return "invalid_uploader_request1";
         }
 
         if (this.maxFileSize != null && totalSize > this.maxFileSize) {
             return "invalid_uploader_request2";
         }
 
         if (fileSize != null) {
             if (chunkNumber < numberOfChunks && fileSize != chunkSize) {
                 return "invalid_uploader_request3";
             }
             if (numberOfChunks > 1 && chunkNumber == numberOfChunks
                     && fileSize != ((totalSize % chunkSize) + chunkSize)) {
                 return "invalid_uploader_request4";
             }
             if (numberOfChunks == 1 && fileSize != totalSize) {
                 return "invalid_uploader_request5";
             }
         }
 
         return "valid";
     }
 
     public int getParamInt(HttpServletRequest req, String key, int def) {
         String value = req.getParameter(key);
         try {
             return Integer.parseInt(value);
         } catch (Exception e) {
         }
         return def;
     }
 
     public String getParamString(HttpServletRequest req, String key, String def) {
         String value = req.getParameter(key);
         try {
             return value == null ? def : value;
         } catch (Exception e) {
         }
         return def;
     }
 
     public void get(HttpServletRequest req, UploadListener listener) {
         int chunkNumber = this.getParamInt(req, "chunkNumber", 0);
         int chunkSize = this.getParamInt(req, "chunkSize", 0);
         int totalSize = this.getParamInt(req, "totalSize", 0);
         String identifier = this.getParamString(req, "identifier", "");
         String filename = this.getParamString(req, "filename", "");
         if (validateRequest(chunkNumber, chunkSize, totalSize, identifier, filename, null).equals("valid")) {
             String chunkFilename = getChunkFilename(chunkNumber, identifier);
             if (new File(chunkFilename).exists()) {
                 listener.callback("found", chunkFilename, filename, identifier, null);
             } else {
                 listener.callback("not_found", null, null, null, null);
             }
 
         } else {
             listener.callback("not_found", null, null, null, null);
         }
     }
 
     public void post(HttpServletRequest req, UploadListener listener) throws IllegalStateException, IOException {
 
         int chunkNumber = this.getParamInt(req, "chunkNumber", 0);
         int chunkSize = this.getParamInt(req, "chunkSize", 0);
         int totalSize = this.getParamInt(req, "totalSize", 0);
         String identifier = this.getParamString(req, "identifier", "");
         String filename = this.getParamString(req, "filename", "");
 
         CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(req.getSession().getServletContext());
 
         if (multipartResolver.isMultipart(req)) {
             // 将request变成多部分request
             MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) req;
             // 获取multiRequest 中所有的文件名
             Iterator<String> iter = multiRequest.getFileNames();
             while (iter.hasNext()) {
                 String name = iter.next().toString();
                 // if (!this.fileParameterName.equals(name)) {
                 // continue;
                 // }
                 MultipartFile file = multiRequest.getFile(name);
 
                 if (file != null && file.getSize() > 0) {
                     String original_filename = file.getOriginalFilename();
                     // String original_filename =
                     // files[this.fileParameterName]['originalFilename'];
                     String validation = validateRequest(chunkNumber, chunkSize, totalSize, identifier, filename,
                             (int) file.getSize());
 
                     if ("valid".equals(validation)) {
                         String chunkFilename = getChunkFilename(chunkNumber, identifier);
 
                         File f = new File(chunkFilename);
                         if (!f.exists()) {
                             file.transferTo(f);
                         }
 
                         int currentTestChunk = 1;
                         int numberOfChunks = (int) Math.max(Math.floor(totalSize / (chunkSize * 1.0)), 1);
 
                         currentTestChunk = this.testChunkExists(currentTestChunk, chunkNumber, numberOfChunks,
                                 chunkFilename, original_filename, identifier, listener,"file");
 
                     } else {
                         listener.callback(validation, filename, original_filename, identifier,"file");
                     }
                 } else {
                     listener.callback("invalid_uploader_request", null, null, null, null);
                 }
             }
         }
     }
 
     private void pipeChunk(int number, String identifier, UploadOptions options, OutputStream writableStream)
             throws IOException {
         String chunkFilename = getChunkFilename(number, identifier);
         if (new File(chunkFilename).exists()) {
             FileInputStream inputStream = new FileInputStream(new File(chunkFilename));
             int maxlen = 1024;
             int len = 0;
             try {
                 byte[] buff = new byte[maxlen];
                 while ((len = inputStream.read(buff, 0, maxlen)) > 0) {
                     writableStream.write(buff, 0, len);
                 }
             } finally {
                 inputStream.close();
             }
             pipeChunk(number + 1, identifier, options, writableStream);
         } else {
             if (options.end)
                 writableStream.close();
             if (options.listener != null)
                 options.listener.onDone();
         }
     }
 
     public void write(String identifier, OutputStream writableStream, UploadOptions options) throws IOException {
         if (options == null) {
             options = new UploadOptions();
         }
         if (options.end == null) {
             options.end = true;
         }
         pipeChunk(1, identifier, options, writableStream);
     }
 
     /**
      * 
      * @param currentTestChunk
      * @param chunkNumber       当前上传块
      * @param numberOfChunks    总块数
      * @param filename          文件名称
      * @param original_filename 源文件名称
      * @param identifier        文件
      * @param listener          监听
      * @param fileType
      * @return
      */
     private int testChunkExists(int currentTestChunk, int chunkNumber, int numberOfChunks, String filename,
             String original_filename, String identifier, UploadListener listener, String fileType) {
         String cfile = getChunkFilename(currentTestChunk, identifier);
         if (new File(cfile).exists()) {
             currentTestChunk++;
             if (currentTestChunk >= chunkNumber) {
                 if (chunkNumber == numberOfChunks) {
                     try {
                         System.out.println("done");
                         // 文件合并
                         UploadOptions options = new UploadOptions();
                         File f = new File(this.temporaryFolder,
                                 original_filename.substring(0,original_filename.lastIndexOf("."))+"-"+UuidUtils.uuid()+"." + FilenameUtils.getExtension(original_filename));
                         options.listener = new UploadDoneListener() {
                             @Override
                             public void onError(Exception err) {
                                 listener.callback("invalid_uploader_request", f.getAbsolutePath(), original_filename,
                                         identifier, fileType);
                                 clean(identifier, null);
                             }
 
                             @Override
                             public void onDone() {
                                 listener.callback("done", f.getAbsolutePath(), original_filename, identifier, fileType);
                                 clean(identifier, null);
                             }
                         };
                         this.write(identifier, new FileOutputStream(f), options);
                     } catch (FileNotFoundException e) {
                         e.printStackTrace();
                         listener.callback("invalid_uploader_request", filename, original_filename, identifier,
                                 fileType);
                     } catch (IOException e) {
                         e.printStackTrace();
                         listener.callback("invalid_uploader_request", filename, original_filename, identifier,
                                 fileType);
                     }
                 } else {
                     listener.callback("partly_done", filename, original_filename, identifier, fileType);
                 }
             } else {
                 return testChunkExists(currentTestChunk, chunkNumber, numberOfChunks, filename, original_filename,
                         identifier, listener, fileType);
             }
         } else {
             listener.callback("partly_done", filename, original_filename, identifier, fileType);
         }
         return currentTestChunk;
     }
 
     public void clean(String identifier, UploadOptions options) {
         if (options == null) {
             options = new UploadOptions();
         }
         pipeChunkRm(1, identifier, options);
     }
 
     private void pipeChunkRm(int number, String identifier, UploadOptions options) {
 
         String chunkFilename = getChunkFilename(number, identifier);
         File file = new File(chunkFilename);
         if (file.exists()) {
             try {
                 file.delete();
             } catch (Exception e) {
                 if (options.listener != null) {
                     options.listener.onError(e);
                 }
             }
             pipeChunkRm(number + 1, identifier, options);
 
         } else {
             if (options.listener != null)
                 options.listener.onDone();
         }
     }
 
     public static interface UploadListener {
         public void callback(String status, String filename, String original_filename, String identifier,
                 String fileType);
     }
 
     public static interface UploadDoneListener {
         public void onDone();
 
         public void onError(Exception err);
     }
 
     public static class UploadOptions {
         public Boolean end;
         public UploadDoneListener listener;
     }
 }

三、至此就差不多了
但是呢 可能会出现一些小问题 例如文件大小的问题 那么这时候就需要这么一个配置了

在这里插入图片描述

这是spring下的配置，自行添加，经god测试，最大上传文件为1GB大小 超出则报错

效果图如下：

在这里插入图片描述

对你有用的话请点赞！评论加关注，感谢您的观看！

行为艺术家.
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-simple-uploader
09-06
vue-simple-uploader 断点续传
vue-simple-uploader文件、文件夹上传不超时
最新发布
E_ISOLATE的博客
07-01 230
【代码】vue-simple-uploader文件、文件夹上传不超时。
vue-simple-uploader上传文件、图片和文件夹
Judas_painting的博客
07-09 2754
<uploader :options="options" class="uploader-example" :fileStatusText="fileStatusText" :autoStart="autoStart" ref="uploader" @file-added="fileAdded" @file-error="errorUpload" @file-success="successUpload".
探索Vue.js中的文件夹上传解决方案：vue-simple-uploader
m0_54340021的博客
06-12 1517
vue-simple-uploader是一个基于Vue.js的组件，它不仅支持文件、多文件、文件夹上传，还具备拖拽上传、错误处理、秒传、分块上传等功能。本文详细介绍了vue-simple-uploader的安装、配置、常用方法与事件，并提供了完整的代码实现及注释，帮助开发者快速掌握并应用这一高效的文件夹上传解决方案。
vue-simple-uploader for vue3源码
04-22
`vue-simple-uploader` 是一个适用于 Vue3 的轻量级文件上传组件，它允许开发者方便地实现文件上传功能，包括大文件的分片上传。在对源码进行深入分析之前，我们先来理解一下大文件分片上传的基本原理。 大文件分片...
vue-simple-uploader上传成功之后的response获取代码
10-14
总结起来，Vue Simple Uploader 提供了一种方便的方式来处理文件上传，包括获取上传成功后的响应数据和实现分片上传。通过结合 SpringBoot 或其他后端框架，我们可以构建出高效且可靠的文件上传系统。记得在开发过程...
springboot、vue-simple-uploader文件上传、续传、秒传 源码
02-27
demo.zip为springboot idea工程，直接启动DemoApplication fileManage.zip为vue工程，解压后运行安装npm install，启动npm run dev
Vue上传组件vue Simple Uploader的用法示例
12-11
Vue上传组件`vue-simple-uploader`是一个非常实用的工具，尤其在处理文件上传需求时。它结合了`simple-uploader.js`和Vue框架，提供了一套完善的上传解决方案，包括UI界面，可定制化，以及一系列高级特性。让我们...
一、文件上传系列-vue-simple-uploader
chenzhao635的专栏
09-17 1064
此部分源码; https://gitee.com/shanhubei/vue-file-uploader 使用vue-simple-uploader上传文件和文件夹 文件上传在项目中应用广泛，尤其类似网盘上传文件的应用，需要批量上传文件、文件夹、秒传、断点续传等功能，那么有一款基于vue的前端上传组件可以满足。这是一个非常强大的文件上传组件，...
vue-uploader:由simple-uploader.js驱动的Vue.js上传组件
05-02
vue-simple-uploader 由驱动的Vue.js上传组件 特征 将文件夹和文件视为File 暂停/继续上传 恢复上传 错误处理 使用文件夹阅读器拖放 自定义上传按钮 资料夹上载 队列管理 文件验证 上传进度 剩余时间 块上传 安装 npm install vue-simple-uploader --save 笔记 用法 在里面 import Vue from 'vue' import uploader from 'vue-simple-uploader' import App from './App.vue' Vue . use ( uploader ) /* eslint-disable no-new */ new Vue ( { render ( createElement ) { return createElement ( App ) } } )
vue 分布式上传文件vue-simple-uploader
Aa12364567的博客
04-16 577
vue 分布式上传文件vue-simple-uploader。
vue-simple-uploader上传组件
weixin_45992894的博客
06-17 8348
vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种：支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传 可暂停、继续上传 错误处理 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传” 分块上传 支持进度、预估剩余时间、出错自动重试、重传等操作安装 使用 源码地址：https://github.com/simple-uploader/vue-uploader 案例：https://gitee.com/luck
Vue 之上传组件 vue-simple-uploader
热门推荐
Radom&7
11-13 3万+
vue-simple-uploader 是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件，自带 UI，可覆盖、自定义。 特点： 支持文件、多文件、文件夹上传 支持拖拽文件、文件夹上传 统一对待文件和文件夹，方便操作管理 可暂停、继续上传 错误处理 支持“快传”，通过文件判断服务端是否已存在从而实现“快传” 上传队列管理，支持最大并发上传 分块上传 支持进度、预估...
推荐使用：Vue-Simple-Upload - 简单易用的Vue文件上传组件
gitblog_00046的博客
06-13 443
推荐使用：Vue-Simple-Upload - 简单易用的Vue文件上传组件 vue-simple-uploadSimple File upload component for Vue.js项目地址:https://gitcode.com/gh_mirrors/vues/vue-simple-upload 在前端开发中，文件上传功能通常是必不可少的一环。今天，我们有幸向您介绍一款高效且易于集成...
浅谈Vue-Simple-Upload
weixin_42454225的博客
04-27 5034
Vue-Simple-Upload 第一次写前端的使用笔记，也是因为这个工具没有很正式的官方文档。所以为防止之后还有可能用到，最好是做一次记录！ 这是什么 是一个基于Vue的上传文件组件，只需要引入其对应依赖，就可以直接使用 <uploader :options="options" class="uploader-example"> <uploader-unsupport></u
强大的 Vue 上传组件 vue-simple-uploader
weixin_34318326的博客
08-24 4465
在日常开发中经常会遇到文件上传的需求，vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件，自带 UI，可覆盖、自定义；先来张动图看看效果： 其主要特点就是： 支持文件、多文件、文件夹上传 支持拖拽文件、文件夹上传 统一对待文件和文件夹，方便操作管理 可暂停、继续...
一二三应用开发平台文件处理设计与实现系列之2——前端集成vue-simple-uploader
学海无涯，行者无疆
06-06 5765
文件的上传是系统的必备功能，Element提供了上传组件upload，也基本能满足常见常用的文件上传功能，特别是应对小型文件（10M以下）的处理。但如果是遇到要求更多更高的场景，上传几百兆甚至上G的视频文件，要求分块上传，能断点续传，显示进度，能暂停，能重试……这时候就显得乏力了。如果基于upload实现，需要附加大量的二次开发，这未必是一种最佳实现方案。 这时候，就需要找一找看一看，市面上是否有现成的“轮子”可用了。 接下来，分两篇，分别介绍下前端实现和后端实现，今天首先来说下前端那些事儿。
vue-simple-uploader多文件上传要怎么写代码
03-09
你可以参考以下代码实现vue-simple-uploader多文件上传： <vue-simple-uploader ref="uploader" :upload-url="uploadUrl" :headers="headers" :multiple="true" :max-file-size-in-mb="maxFileSizeInMb" ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值