这篇文章主要介绍了vue中多附件上传的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
前言
本篇主要记录在 Vue项目中 实现附件上传功能，可实现单/多附件上传，识别文件格式并用不同图标展示功能，及控制是否可编辑功能。内容简洁易懂，如有需要可自取。 完整代码点击这里click
核心代码
<div class="upload-flie-btn"> <div class="btn-tips">上传附件</div></div>
openFileSelect() { // dispatchEvent 向一个指定的事件目标派发一个事件 this.$refs.fileInput.dispatchEvent(new MouseEvent('click')); } // 多附件上传 async uploadFile() { let _this = this; this.loading = true; // 获取上传的文件，如要限制文件上传数量可以 // let files = [...this.$refs.fileInput.files].splice(0,limit); // 也可以在此处抛出文件数量超出限制的提示 let files = [...this.$refs.fileInput.files]; if (!files || !files.length) { return; } // 后端接口地址 let url = `url`; // 一起请求后端接口 Promise.all( files.slice(0, files.length).map((file) => { const data = new FormData(); data.append('file', file); return request.post(url, data, { headers: { 'Content-Type': 'multipart/form-data', }, }); })Ï ).then((res) => { _this.loading = false; _this.$refs.fileInput.value = null; }) .catch((err) => { console.log(err); }); }
文件展示部分代码
此部分使用了 vux 组件库，该部分处理了word、excel、ppt、pdf、image、txt格式的文件展示问题，其它类型的文件均展示位“其它”，也可以自行更换矢量图，iconfont 中可以查找到。遍历的数据字段可根据自己的数据格式进行修改。
<div> 删除</div><div class="demo-content vux-1px-t"> <div class="file-item"> <!-- word --><div> 0 || item.fileName.indexOf('.docx') > 0" class="file-icon"> </div><!-- excel --><div> 0 || item.fileName.indexOf('.xlsx') > 0" class="file-icon"> </div><!-- ppt --><div> 0 || item.fi<mark>来源gaodaimacom搞#^代%!码网</mark>leName.indexOf('.pptx') > 0" class="file-icon"> </div><!-- pdf --><div> 0" class="file-icon"> </div><!-- image --><div> 0 || item.fileName.indexOf('.jpeg') > 0 || item.fileName.indexOf('.png-600') > 0" class="file-icon"> </div><!-- txt --><div> 0" class="file-icon"> </div><!-- other --><div class="file-icon"> </div><div class="file-name">{{item.fileName}}</div></div></div>
以上就是vue中多附件上传的实现示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue中多附件上传的实现示例
转载请注明原文链接：vue中多附件上传的实现示例
