vue-simple-uploader上传成功之后的response获取代码


Posted in Javascript onSeptember 07, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
<uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-success="fileSuccess"></uploader>
</template>
<script>
export default {
 
data () {
 return {
 options: {
  target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
  testChunks: false
 },
 attrs: {
  accept: 'image/*'
 },
 statusText: {
  success: '成功了',
  error: '出错了',
  uploading: '上传中',
  paused: '暂停中',
  waiting: '等待中'
 }
 }
},
methods: {
//上传成功的事件
fileSuccess (rootFile, file, message, chunk) {
 console.log('complete', rootFile, file, message, chunk)
}
},
mounted () {
// 获取uploader对象
 this.$nextTick(() => {
 window.uploader = this.$refs.uploader.uploader
 })
}
}
</script>

补充知识:利用SpringBoot和vue-simple-uploader进行文件的分片上传

效果【上传Zip文件为例,可以自行扩展】

vue-simple-uploader上传成功之后的response获取代码

引入vue-simple-uploader

1.安装上传插件

npm install vue-simple-uploader --save

2.main.js全局引入上传插件

import uploader from 'vue-simple-uploader'

Vue.use(uploader)

3.安装md5校验插件(保证上传文件的完整性和一致性)

npm install spark-md5 --save

页面

<template>
 <div>
 <uploader :key="uploader_key" :options="options" class="uploader-example"
    :autoStart="false"
    @file-success="onFileSuccess"
    @file-added="filesAdded">
  <uploader-unsupport></uploader-unsupport>
  <uploader-drop>
  <uploader-btn :single="true" :attrs="attrs">选择Zip文件</uploader-btn>
  </uploader-drop>
  <uploader-list></uploader-list>
 </uploader>
 </div>
</template>
 
<script>
 import SparkMD5 from 'spark-md5';
 
 export default {
 data() {
  return {
  uploader_key: new Date().getTime(),
  options: {
   target: '/chunk/chunkUpload',
   testChunks: false,
  },
  attrs: {
   accept: '.zip'
  }
  }
 },
 methods: {
  onFileSuccess: function (rootFile, file, response, chunk) {
  console.log(JSON.parse(response).model);
  },
  computeMD5(file) {
  const loading = this.$loading({
   lock: true,
   text: '正在计算MD5',
   spinner: 'el-icon-loading',
   background: 'rgba(0, 0, 0, 0.7)'
  });
  let fileReader = new FileReader();
  let time = new Date().getTime();
  let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  let currentChunk = 0;
  const chunkSize = 10 * 1024 * 1000;
  let chunks = Math.ceil(file.size / chunkSize);
  let spark = new SparkMD5.ArrayBuffer();
  file.pause();
 
  loadNext();
 
  fileReader.onload = (e => {
   spark.append(e.target.result);
   if (currentChunk < chunks) {
   currentChunk++;
   loadNext();
   this.$nextTick(() => {
    console.log('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
   })
   } else {
   let md5 = spark.end();
   loading.close();
   this.computeMD5Success(md5, file);
   console.log(`MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${new Date().getTime() - time} ms`);
   }
  });
  fileReader.onerror = function () {
   this.error(`文件${file.name}读取出错,请检查该文件`);
   loading.close();
   file.cancel();
  };
 
  function loadNext() {
   let start = currentChunk * chunkSize;
   let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
   fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
  }
  },
  computeMD5Success(md5, file) {
  file.uniqueIdentifier = md5;//把md5值作为文件的识别码
  file.resume();//开始上传
  },
  filesAdded(file, event) {
  //大小判断
  const isLt100M = file.size / 1024 / 1024 < 10;
  if (!isLt100M) {
   this.$message.error(this.$t("error.error_upload_file_max"));
  } else {
   this.computeMD5(file)
  }
  }
 }
 }
</script>
 
<style>
 .uploader-example {
 width: 90%;
 padding: 15px;
 margin: 40px auto 0;
 font-size: 12px;
 box-shadow: 0 0 10px rgba(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>

后台

引入工具

<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.6</version>
</dependency>
 
<dependency>
 <groupId>commons-lang</groupId>
 <artifactId>commons-lang</artifactId>
 <version>2.6</version>
</dependency>

控制类

import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
 
@RestController
@RequestMapping("/chunk")
public class ChunkController {
 @RequestMapping("/chunkUpload")
 public StdOut chunkUpload(MultipartFileParam param, HttpServletRequest request, HttpServletResponse response) {
  StdOut out = new StdOut();
 
  File file = new File("C:\\chunk_test");//存储路径
 
  ChunkService chunkService = new ChunkService();
 
  String path = file.getAbsolutePath();
  response.setContentType("text/html;charset=UTF-8");
 
  try {
   //判断前端Form表单格式是否支持文件上传
   boolean isMultipart = ServletFileUpload.isMultipartContent(request);
   if (!isMultipart) {
    out.setCode(StdOut.PARAMETER_NULL);
    out.setMessage("表单格式错误");
    return out;
   } else {
    param.setTaskId(param.getIdentifier());
    out.setModel(chunkService.chunkUploadByMappedByteBuffer(param, path));
    return out;
   }
  } catch (NotSameFileExpection e) {
   out.setCode(StdOut.FAIL);
   out.setMessage("MD5校验失败");
   return out;
  } catch (Exception e) {
   out.setCode(StdOut.FAIL);
   out.setMessage("上传失败");
   return out;
  }
 }
}

StdOut类(只是封装的返回类)

public class StdOut {
 public static final int SUCCESS = 200;
 public static final int FAIL = 400;
 public static final int PARAMETER_NULL = 500;
 public static final int NO_LOGIN = 600;
 private int code = 200;
 private Object model = null;
 private String message = null;
 
 public StdOut() {
  this.setCode(200);
  this.setModel((Object)null);
 }
 
 public StdOut(int code) {
  this.setCode(code);
  this.setModel((Object)null);
 }
 
 public StdOut(List<Map<String, Object>> model) {
  this.setCode(200);
  this.setModel(model);
 }
 
 public StdOut(int code, List<Map<String, Object>> model) {
  this.setCode(code);
  this.setModel(model);
 }
 
 public int getCode() {
  return this.code;
 }
 
 public void setCode(int code) {
  this.code = code;
 }
 
 public String toString() {
  return JSON.toJSONString(this);
 }
 
 public Object getModel() {
  return this.model;
 }
 
 public void setModel(Object model) {
  this.model = model;
 }
 
 public String getMessage() {
  return this.message;
 }
 
 public void setMessage(String message) {
  this.message = message;
 }
}

MultipartFileParam类(文件信息类)

import org.springframework.web.multipart.MultipartFile;
 
public class MultipartFileParam {
 private String taskId;
 private int chunkNumber;
 private long chunkSize;
 private int totalChunks;
 private String identifier;
 private MultipartFile file;
 
 public String getTaskId() {
  return taskId;
 }
 
 public void setTaskId(String taskId) {
  this.taskId = taskId;
 }
 
 public int getChunkNumber() {
  return chunkNumber;
 }
 
 public void setChunkNumber(int chunkNumber) {
  this.chunkNumber = chunkNumber;
 }
 
 public long getChunkSize() {
  return chunkSize;
 }
 
 public void setChunkSize(long chunkSize) {
  this.chunkSize = chunkSize;
 }
 
 public int getTotalChunks() {
  return totalChunks;
 }
 
 public void setTotalChunks(int totalChunks) {
  this.totalChunks = totalChunks;
 }
 
 public String getIdentifier() {
  return identifier;
 }
 
 public void setIdentifier(String identifier) {
  this.identifier = identifier;
 }
 
 public MultipartFile getFile() {
  return file;
 }
 
 public void setFile(MultipartFile file) {
  this.file = file;
 }
}

ChunkService类

import org.apache.commons.codec.digest.DigestUtils;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang.StringUtils;
 
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.RandomAccessFile;
import java.nio.ByteBuffer;
import java.nio.channels.FileChannel;
import java.util.UUID;
 
public class ChunkService {
 public String chunkUploadByMappedByteBuffer(MultipartFileParam param, String filePath) throws IOException, NotSameFileExpection {
 
  if (param.getTaskId() == null || "".equals(param.getTaskId())) {
   param.setTaskId(UUID.randomUUID().toString());
  }
 
  String fileName = param.getFile().getOriginalFilename();
  String tempFileName = param.getTaskId() + fileName.substring(fileName.lastIndexOf(".")) + "_tmp";
  File fileDir = new File(filePath);
  if (!fileDir.exists()) {
   fileDir.mkdirs();
  }
  File tempFile = new File(filePath, tempFileName);
  //第一步 打开将要写入的文件
  RandomAccessFile raf = new RandomAccessFile(tempFile, "rw");
  //第二步 打开通道
  FileChannel fileChannel = raf.getChannel();
  //第三步 计算偏移量
  long position = (param.getChunkNumber() - 1) * param.getChunkSize();
  //第四步 获取分片数据
  byte[] fileData = param.getFile().getBytes();
  //第五步 写入数据
  fileChannel.position(position);
  fileChannel.write(ByteBuffer.wrap(fileData));
  fileChannel.force(true);
  fileChannel.close();
  raf.close();
  //判断是否完成文件的传输并进行校验与重命名
  boolean isComplete = checkUploadStatus(param, fileName, filePath);
  if (isComplete) {
   FileInputStream fileInputStream = new FileInputStream(tempFile.getPath());
   String md5 = DigestUtils.md5Hex(fileInputStream);
   fileInputStream.close();
   if (StringUtils.isNotBlank(md5) && !md5.equals(param.getIdentifier())) {
    throw new NotSameFileExpection();
   }
   renameFile(tempFile, fileName);
   return fileName;
  }
  return null;
 }
 
 public void renameFile(File toBeRenamed, String toFileNewName) {
  if (!toBeRenamed.exists() || toBeRenamed.isDirectory()) {
   System.err.println("文件不存在");
   return;
  }
  String p = toBeRenamed.getParent();
  File newFile = new File(p + File.separatorChar + toFileNewName);
  toBeRenamed.renameTo(newFile);
 }
 
 public boolean checkUploadStatus(MultipartFileParam param, String fileName, String filePath) throws IOException {
  File confFile = new File(filePath, fileName + ".conf");
  RandomAccessFile confAccessFile = new RandomAccessFile(confFile, "rw");
  //设置文件长度
  confAccessFile.setLength(param.getTotalChunks());
  //设置起始偏移量
  confAccessFile.seek(param.getChunkNumber() - 1);
  //将指定的一个字节写入文件中 127,
  confAccessFile.write(Byte.MAX_VALUE);
  byte[] completeStatusList = FileUtils.readFileToByteArray(confFile);
  confAccessFile.close();//不关闭会造成无法占用
  //创建conf文件文件长度为总分片数,每上传一个分块即向conf文件中写入一个127,那么没上传的位置就是默认的0,已上传的就是127
  for (int i = 0; i < completeStatusList.length; i++) {
   if (completeStatusList[i] != Byte.MAX_VALUE) {
    return false;
   }
  }
  confFile.delete();
  return true;
 }
}

6.NotSameFileExpection类

public class NotSameFileExpection extends Exception {
 public NotSameFileExpection() {
  super("File MD5 Different");
 }
}

遇到问题

根据自己的实际情况进行取舍,灵活处理。

以上这篇vue-simple-uploader上传成功之后的response获取代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
vue实现商城购物车功能
Nov 27 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 #Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 #Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 #Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 #Javascript
一篇文章带你从零快速上手Rollup
Sep 07 #Javascript
基于vue hash模式微信分享#号的解决
Sep 07 #Javascript
在项目vue中使用echarts的操作步骤
Sep 07 #Javascript
You might like
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python学习之编写查询ip程序
2016/02/27 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Keras 使用 Lambda层详解
2020/06/10 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python和php学习哪个更有发展
2020/06/17 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
软件部经理岗位职责范本
2014/02/25 职场文书
见习报告的格式
2014/10/31 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书