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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
javascript 动态添加表格行
Jun 22 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
网页自动跳转代码收集
2009/09/27 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
微信网页登录逻辑与实现方法
2019/04/29 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python 统计字数的思路详解
2018/05/08 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python实现ftp文件传输功能
2020/03/20 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
个人委托书范本
2014/09/13 职场文书
绿色校园广播稿
2014/10/13 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
给校长的建议书范文
2015/09/14 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
高二语文教学反思
2016/02/16 职场文书
《西门豹》教学反思
2016/02/23 职场文书
导游词之青城山景区
2019/09/27 职场文书