vue-simple-uploader上传成功之后的response获取代码
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
我就废话不多说了,大家还是直接看代码吧~
<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
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) "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获取代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇:Vue.js暴露方法给WebView的使用操作