商城网站做推广方案网站建设公司广告

当前位置： 首页 > news >正文

商城网站做推广方案,网站建设公司广告,海外贸易在什么网站做,2817网站本文主要介绍#xff0c;在vue3vite项目下#xff0c;如何进行有效的大文件上传#xff0c;本文章主要讲大文件切片上传方式#xff0c;并提供简单的demo代码供参考 首先#xff0c;请确保已经创建好项目#xff0c;这一步跳过。 1、为了选择合适的文件#xff0c;我们…本文主要介绍在vue3vite项目下如何进行有效的大文件上传本文章主要讲大文件切片上传方式并提供简单的demo代码供参考 首先请确保已经创建好项目这一步跳过。 1、为了选择合适的文件我们可以先写一个组件用来选择文件并且将所选择的文件暴露到app.vue中。 下面是我自己写的组件可以根据自己的需要进行修改操作。主要的部分有将默认的拖拽事件比如进入悬浮离开全部阻止默认行为只允许放置操作并且在放置操作完成文件内容的读取代码如下 FileUpload.vue templatedivdiv classupload-demo refupel-icon classel-icon–uploadupload-filled //el-icon/div/div /templatescript setup nameFileUpload import { UploadFilled } from element-plus/icons-vue import { onMounted, reactive, ref } from vueconst up ref(null); const fileUrl reactive({}); const emit defineEmits([getFile]); onMounted(() {console.log(up.value)up.value.addEventListener(dragenter, (e){ //阻止默认事件e.preventDefault();e.stopPropagation();})up.value.addEventListener(dragover, (e){e.preventDefault();e.stopPropagation();})up.value.addEventListener(dragleave, (e){e.preventDefault();e.stopPropagation();})up.value.addEventListener(drop, async (e){e.preventDefault();e.stopPropagation();const f e.dataTransfer.files; //在此处获取用户拖拽进去组件的文件数组const file f[0]; //取第一个在这里我默认只拖拽一个可以自己选择性进行扩展如果怕f为空报错选择trycatch我为了方便就没写if(!file) return console.error(没有文件)if(file.size 1024*1024*1024*2) return console.error(文件太大); //文件超过2G太大不上传if(!file.type.startsWith(video)) return console.error(只能上传视频文件); Object.assign(fileUrl, file) emit(getFile, file);}) }) defineExpose({fileUrl}) /scriptstyle scoped .upload-demo{width: 200px;height: 100px;border: 1px dotted gray;transition: all 3s;font-size: 100px;display: flex;justify-content: center;align-items: center; } .upload-demo:hover{border: 1px dotted blue } /style在app.vue中引用组件 FileUpload getFilegetFile/FileUpload其中涉及到的getfile方法为子组件调用函数触发的方法主要用来传递选中的文件 let url ref(); let upfile reactive{[key: string]: string}({}); let appfile:any null; function getFile(file:any){console.log(child set:, file);console.log(typeof file); //File类型根据原型链底层是objectif(typeof file ! object){return console.error(文件格式不对非对象);}url.value URL.createObjectURL(file); //创建临时URL地址索引到用户本地的文件地址方便页面展示appfile file;console.log(appfile);Object.assign(upfile, { //创建一个包含文件地址文件名类型的对象进行保存url,type: file.type,name: file.name}) }子组件到这里就结束我将主体逻辑写到app中方便展示最好的方式还是全部封装到子组件达到高内聚低耦合每一个模块只干一件事。 2、获取唯一的文件名称 通常对于每一个相同的文件我们需要为其生成一个唯一的名字然后上传到服务器根据唯一名称判断是否同一个文件节省资源的同时提高用户体验。如何根据文件内容获取唯一的文件名称我们先将文件内容转为二进制再利用浏览器提高的apicrypto.subtle.digest生成哈希值注意该方法异步容易被忽略再转为16进制字符串这就是文件的唯一名 async function getFilename(){const hashname await getFileHashname();const fileExtension upfile.name.split(.).pop();return \({hashname}.\){fileExtension}; } async function getFileHashname(){console.log(appfile);const arrayBuffer await appfile.arrayBuffer();const hashBuffer await crypto.subtle.digest(SHA-256, arrayBuffer);const hex Array.from(new Uint8Array(hashBuffer)).map(b b.toString(16).padStart(2, 0)).join();return hex; }3、切片操作 首先认识一下文件大小的概念浓缩为以下公式 1GB 1024MB 1024*1024KB 1024*1024*1024B 那么文件切片也就是将很大的文件切成很多块每块的大小我们自己决定当然在现实应用中是需要根据网络流量服务器的负载等因素进行动态调整这个切片的大小我们切片的过程中完全可以把File当成一个具有一定大小的数组如果你这么思考那么下面的代码将通俗易懂主要做的就是存储切后的块此外我们还需要将切片的顺序写入切片名字中后端可以识别然后进行拼接。 //切片操作 切成10*1024*1024也就是10MB const CHUNKS_SIZE 10 * 1024 * 1024; async function sectionFile(filename:string){console.log(filename);const chunks createChunks(filename);console.log(chunks);return chunks; } function createChunks(filename: string){let chunks [];const count Math.ceil(appfile.size / CHUNKS_SIZE);for(let i 0; i count; i){let chunk appfile.slice(i*CHUNKS_SIZE, (i1)*CHUNKS_SIZE);chunks.push({chunk,chunkFileName: \({filename}-\){i}})}return chunks; } 3、封装axios 这一步主要做的操作是提前封装一下axios更加好的适应后端返回的主体内容当然你可以选择不进行这一步因为这不是必须的。 简单封装axios判断是否返回的主体内容有success否则抛出错误。 import axios from axios;const axiosInstance axios.create({baseURL: http://localhost:8080 }) axiosInstance.interceptors.response.use((response){ if(response.data response.data.success){return response.data;} else {return new Error(response.data.msssage || service error)}},(error){console.log(error);return error; })4、上传进度条 一开始小伙伴肯定很好奇为什么我发送的请求看不见进度但是别人怎么看见进度的难道后端有返回参数嘛当然不是如果要一直返回参数那这个开销可就不得了啦 其实事情是这样子的axios请求提供一个方法来监听上传的进度也就是请求的进度如果你能够熟练使用这个方法那么对页面的一些交互大有裨益这个方法就是onUploadProgress 其中参数是progressEvent有两个重要属性total和loaded意义如同属性名但是值得注意的是loaded是一个01的范围数据所以下面的代码有细节请注意哦如果你发现这个小小小的细节请在评论区打出 let progress reactive{[key: string]: number}({}); onUploadProgress: (progressEvent){if(!progressEvent.total) return ;const percentProgress Math.round(progressEvent.loaded*100 / progressEvent.total)Object.assign(progress, {…progress, [item.chunkFileName]: percentProgress})console.log(shangchuangzhong);}5、上传文件 到这里就差最重要的上传文件啦先来一个按钮 button clickuploadFile上传/buttonel-progress v-for(item, index) in getpro :percentageitem :keyindex/所谓文件切片其实最重要的就是实现文件切片后可以将切片并行上传可以极大加快上传的效率因为充分利用了服务器的吞吐量和效率。所以上述我们已经完成切片而且将切片的顺序写入切片名字中后端可以识别然后进行拼接所以在上传完切片后还需要发送一个合并文件的请求 async function uploadFile(){const filename await getFilename();console.log(name: , filename);const chunks await sectionFile(filename);const requsetList chunks.map(item {return axiosInstance.post(/upload/\({filename}, item.chunk, {headers:{Content-Type:application/octet-stream},params: {chunkFileName: item.chunkFileName},onUploadProgress: (progressEvent){if(!progressEvent.total) return ;const percentProgress Math.round(progressEvent.loaded*100 / progressEvent.total)Object.assign(progress, {...progress, [item.chunkFileName]: percentProgress})console.log(shangchuangzhong);}})})try {await Promise.all(requsetList);//切片发送完还需要发一个合并文件内容的请求await axiosInstance.get(/mergeFile/\){filename}, {headers: {Content-Type: application/json}}).then((){console.log(rollback);// Object.assign(progress, null) //没法做到清空对象Object.keys(progress).forEach(key {delete progress[key];});})console.log(上传完毕)} catch (error) {console.log(error);return ;} }到这里就ok啦