vue + elementui 文件的上传&下载

文件的上传主要是用到了elementui中的组件,因为有些细节问题,初次使用时难免会忽略,所以在此分享下;

文件的下载主要是通过a连接的href属性来实现的,如果后台对传递的参数有要求,可以通过其他方式来处理,此处主要是通过    JSON.String() 和 base64 来进行转换和加密(貌似base64有加密的效果,一直忙于实现业务代码,如果有哪些地方说的不对的,敬请大神指正)

上传

elementui 官网上提供的组件是这样:

<el-upload

            class="upload-demo"

            action="https://jsonplaceholder.typicode.com/posts/"

            :on-preview="handlePreview"

            :on-remove="handleRemove"

            :before-remove="beforeRemove"

            multiple

            :limit="3"

            :on-exceed="handleExceed"

            :file-list="fileList">

            <el-button size="small" type="primary">点击上传</el-button>

            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

        </el-upload>

在我项目中的使用是这个样子滴:

<el-upload

            class="upload-demo"

            action="https://jsonplaceholder.typicode.com/posts/" // 此处可以抽取,通过在data中定义变量

            :limit="1"

            :on-success="afterSuccess" // 通过在methods定义一个回调函数,来对文件上传返回的结果进行监听,afterSuccess中有三个固定的参数,分别是respose,file,fileList,具体如下图

            name='file'> // 此处是项目中后台要求传递的参数

        </el-upload>

优化上传地址的写法如下:

<el-upload

            class="upload-demo"

           :action="actionURL" // actionURL应该在data中先定义再使用

            :limit="1"

            :on-success="afterSuccess"

            :name='file'>

        </el-upload>

上传成功之后的回调函数

methods:{

            afterSuccess(response,file,fileList) {

                    console.log(response) //返回的是上传之后后台返回的结果

                }

            }

下载

        var blob = new Blob([],{type:'application/excel;charset=utf-8'})

        var downloadElement = document.createElement('a')

        var href = window.URL.createObjectURL(blob) //创建下载链接

        let sendParams = Base64.encode(JSON.stringify('传递的参数')) // 可以省略  具体看业务需求

        downloadElement.href = '接口地址'// 此处可以通过拼接字符串的方式传递参数

        document.body.appendChild(downloadElement)

        downloadElement.click() // 点击下载

        document.body.removeChild(downloadElement) // 下载完成之后移除元素

        window.URL.removeObjectURL(href) // 释放掉blob对象

注:如果需要用到base64,则需要按照网上教程进行安装,并在mian.js中进行相应的引入;本人目前涉及的是vue项目