vue实现自定义上传下载

前言： 对于文件图片的上传下载。首先要了解原理 - 前端所使用的二进制_哆来A梦没有口袋的博客-CSDN博客_前端上传文件二进制

elementui自带了文件上传，图片上传，但是很多时候样式不满足，需要自己变更，那自定义实现上传下载又是如何的呢？

原生的上传下载依赖的是什么？input输入框

1.input

input的type有很多种类型： text, password,button,radio,checkbox....

上传主要用到的是 - file类型

<input type="file" accept multiple></input>

 accpt:

属性规定了可通过文件上传提交的服务器接受的文件类型。

常用的MIME类型

后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

例如：限制只能上传图片

 <input type="file" class="file"  accept="image/x-png, image/jpg, image/jpeg"/>

multiple - 定义是否多选

2.在vue中应用

在vue中灵活应用input, 写好上传样式，触发input回调实现上传

例如：上传头像

 html部分

 <el-form-item label="上传头像">
               <div class="upload-img">
                  <ul>
                    <li @click="upload"><i class="iconfont icon-avar"></i> <span>上传</span></li>
                    <li><img :src="src ? src : require('../../assets/imgs/avar.png')"/> <div><div class="op"></div><div class="fonts"><i class="iconfont icon-big"></i><span>预览图</span></div></div></li>
                  </ul>
                  <p>建议上传图片尺寸为60*60px,若不设置则使用系统默认头像</p>
                  <input type="file" class="file" ref="upload" accept="image/x-png, image/jpg, image/jpeg"  @change="submitUpload"/>
               </div>
            </el-form-item>

css

留下input框的dom结构，但是不占用位置

  .file {
       display: block;
       width: 0;
       height: 0;
   }

js

点击upload触发input框上传，将选取文件上传给后端

       upload() {
            this.$nextTick(() => {
                this.$refs.upload.click()
            })
        },
        submitUpload(e) {
            const files = e.target.files
            const rawFile = files[0] // only use files[0]
            if (!rawFile) return
            if(this.loading) return
            this.loading = true
            this.$util.uploadFile({
                file: rawFile, 
                type: '101002',
                success: (res) => {
                    this.src = res.url;
                    this.form.attachmentId = res.id;
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.$refs.upload.value = '';
                    this.loading = false;
                },
                fail:(res) => {
                     this.$message({
                        message: res,
                        type: 'error'
                    });
                    this.loading = false;
                    this.$refs.upload.value = '';
                }
            })
        }

封装上传方法 - util.uploadFile

  uploadFile({file, type, success= () => {}, fail= ()=> {}, baseUrl = '/common/upload'}) {
        let form = new FormData()
        form.append('file', file)
        if(type) {
            form.append('sourceType', type)
        }
        let url = process.env.BASE_URL + baseUrl
        axios({
            method: 'post',
            url,
            data: form,
            headers: {
                'Content-Type': 'multipart/form-data',
                'Authorization': localStorage.getItem('token'),
            }
        }).then(res => {
            if(res.data.code == 200) {
                return success(res.data.data)
            }else {
               return fail(res.data.message)
            }
        })
    },

就这样就实现了自定义上传拉

3.自定义下载

下载文件，主要是要理解下载时后端返回的数据是什么，前端到底要怎么处理，可以去看看前面的文章链接，这里直接写封装的方法

例如： 下载excel

 exportExcel(url, data, excelName){
        axios({
            method: 'post',
            url: process.env.BASE_URL + url,
            headers: {
                Authorization: localStorage.getItem('token')
            },
            responseType:'arraybuffer',
            data,
        }).then(res => {
            console.log(res, 'resss')
            const link = document.createElement('a')
            const fileName = excelName + ".xlsx";  
            let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.download = fileName //下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
 
        })
    }