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 相关文章推荐
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
微信小程序实现签到功能
2018/10/31 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Weblogc domain问题
2014/01/27 面试题
Why we need EJB
2016/10/20 面试题
2014年财政局工作总结
2014/12/09 职场文书
工会积极分子个人总结
2015/03/03 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
刑事撤诉申请书
2015/05/18 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
Python实现简单得递归下降Parser
2022/05/02 Python