本文共 5318 字，大约阅读时间需要 17 分钟。

1. 文件上传（图片、word，ppt，pdf，excel，txt等文件流）

总结一下上传组件的思路

• input标签的@change事件

• 通过input标签的@change事件的绑定，进行文件的选择上传，获取到文件const uploadFile = file.target.files[0]，然后通过文件流转为base64，然后可以在前端进行预览。

• 预览只有图片和PDF

• 预览的文件不多，只有img，和pdf的可以预览，这和浏览器可以打开的文件流有关，前端能做到的预览只有图片和PDF，像word、和ppt、excel等不可前端预览，需要后端解析，重新返回相应地址方可预览

• word、和ppt、excel的预览需要后端做出相应的处理，这些文件返回的地址是处理过的，预览地址和下载地址是不一样的

• 后端给的文件地址必须公网

• 微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

• 上传的子组件

• 父组件使用：

• 引入

  import addAttachments from '@/components/addAttachments/addAttachments.vue' import { apideleteAccessory } from '@/js/fileUpload/fileUpload.js'

• 注册：components: { addAttachments },

• 使用：<add-attachments ref="refaddattachments" @getattachmentList="getattachmentList"></add-attachments>

• 父组件通过refs打开子组件，并且进行数据的获取等

// 添加附件    uploadfileclick () {      this.$refs.refaddattachments.openaddattachments()    },    // 获取数据    getattachmentList (arrlist) {      if (arrlist && arrlist.length > 0) {        this.attachmentList = this.attachmentList.concat(arrlist)      } else {        this.attachmentList = []      }    },    // 查看附件    seefileClick (item) {      window.open(item.url)    },    // 删除附件    deletefileClick (item, index) {      this.$confirm('是否确定删除？删除即将从数据库中删除！', '提示', {        confirmButtonText: '确定',        cancelButtonText: '取消',        type: 'warning'      }).then(() => {        apideleteAccessory(item.ADAccessoryID)          .then((res) => {            const result = res.data.result.resultObj            if (result && result.length > 0) {              if (result[0].flag === 'Y') {                // this.applyBillInfo.ADAccessory.splice(index, 1)                this.attachmentList.splice(index, 1)                this.applyBillInfo.ADAccessory = []                this.$message.success('删除附件成功！')              } else {                this.$message.error('删除附件失败！')              }            }          })          .catch((err) => {            this.$message.error('删除附件失败：' + err)          })      })    },    // 下载附件    downfileClick (item) {      window.open(item.downloadUrl)    }

• 父组件的容器和触发方式

•      
    
        
      
         
                附件    
         
      
         
          添加    
         
      
         
          添加
         
    
        
    
        
      
         
          
          
           {
      {item.fileName}}
          
          
          
            
           
              
                      
           
            
           
              
                      
           
          
          
        
         
    
        
       

• • 父组件容器的样式

// 附件            .accessory-content{                display: flex;                flex-direction: column;                justify-content: flex-start;                background:#F3F8FC;                padding: 11px 14px;                box-sizing: border-box;                .content-title{                    display: flex;                    justify-content: space-between;                    margin-bottom: 10px;                    .title-left{                        color: #303133;                        font-size: 14px;                        font-family: PingFangSC-Medium;                    }                    .title-right{                        cursor: pointer;                        color: rgba(0, 137, 255, 100);                        font-size: 14px;                        font-family: PingFangSC-Regular;                    }                }                .content-main{                    width: 100%;                    .content-attachment-list{                        display: flex;                        justify-content: space-between;                        align-items: center;                        height: 30px;                        line-height: 30px;                        .attachment-list-name{                            overflow: hidden;                            text-overflow: ellipsis;                            display: -webkit-box;                            -webkit-line-clamp: 1;                            -webkit-box-orient: vertical;                            width: 80%;                            text-align: left;                            color: rgba(96, 98, 102, 100);                            font-size: 14px;                            font-family: PingFangSC-Regular;                            cursor: pointer;                        }                        .attachment-list-right{                            display: flex;                            .attachment-list-btn{                                cursor: pointer;                                margin-right: 5px;                                .el-icon-delete,                                .el-icon-download{                                    width: 20px;                                    text-align: center;                                    font-size: 16px;                                    color: #0089FF;                                }                            }                        }                    }                }            }

最后的效果图

转载地址：http://whwni.baihongyu.com/