vue之element-ui文件上传下载

偏执的太偏执、 2021-08-27 17:53 389阅读 0赞

1.文件下载兼容IE

//以一个方法的形式 调用改方法传递参数
      //pafurl 是一个网络地址(浏览器打开可以访问) http://**
      //name 文件下载下来的文件名字
     onDownLoad(pafurl, name) {
                    axios.get(pafurl, { responseType: 'blob' })
                        .then(response => {
                            //IE
                            if (window.navigator.msSaveBlob) {
                                return window.navigator.msSaveBlob(
                                    new Blob([response.data]),
                                    name
                                );
                                //msSaveOrOpenBlob
                            }
                            const url = window.URL.createObjectURL(new Blob([response.data]))
                            const link = document.createElement('a')
                            // 返回的header Content-Disposition:attachment; filename=elmeast-report-2018-2.pdf
                            let head = response.headers['content-disposition']
                            let fname = name
                            link.href = url
                            link.setAttribute('download', fname)
                            document.body.appendChild(link)
                            link.click()
                        })
                        .catch(error => {
                            console.log(error)
                        })
    
                },

2.文件上传

采用 el-upload

//vue  只有重点代码 
     <template>
     <el-dialog title="上传" :visible.sync="dialogUpload" width="300px" append-to-body>
                <table style="width:100%">
                    <tr>
                        <td>
                            <div style="width:80px">附件名称</div>
                        </td>
                        <td>
                            <el-input type="text" v-model="docname"></el-input>
                        </td>
                    </tr>
                   
                </table>
    
                <el-upload class="upload-demo" ref="upload" action="#" :on-preview="handlePreview" :on-remove="handleRemove" :limit="1" :http-request="submitUpload"
                    :file-list="fileList" :auto-upload="false" :multiple=false :before-upload="beforeUpload" accept=".pdf, .PDF" style="text-align: center">
                    <el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">上传到服务器
                    </el-button>
                    <div slot="tip" class="el-upload__tip">只能上传一个pdf文件</div>
                </el-upload>
                </el-form>
            </el-dialog>
    
    </template>
    <script>
      export default {
    data(){
     return{
    }
    },
    methods:{
     upload() {
                    //上传文书
                    this.dialogUpload = true;
                },
                submitUpload1(){
                    this.$refs.upload.submit();
                },
                //上传到服务器
                submitUpload(file) {  
                    if(this.docname==""){                  
                        this.$message.warning("文件名必填")
                        return;
                    }            
                    let formData = new FormData();
                    formData.append("file", file.file);
                 
                  axios("url",formData)
                        .then(response => {
                            this.fileList = [];
                            if (response.status == 200) {
                                if (response.data.code == 200) {
                                    this.$message.success("上传成功！");
                                 
    
                                } else {
                                    this.$message.error("错误信息：" + response.data.message);
                                }
                            } else {
                                this.$message.error("请求失败：" + response.status);
                            }
                        })
                        .catch(error => {
                            this.fileList = [];
                            //console.log(error);
                            this.$message.error("异常信息：" + error);
                        });
                },
                handleRemove(file, fileList) {
                    // console.log(file, fileList);
                },
                handlePreview(file) {
                    // console.log(file);
                },
                // 判断格式
                beforeUpload(file) {
                    const isJPG =
                        file.type === "image/jpeg" ||
                        file.type === "image/jpg" ||
                        file.type === "image/png";
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!file.type === "application/pdf") {
                        //this.$message.error("上传图片只能是jpeg/jpg/png/gif格式!");
                        this.$message.error("只能上传pdf文件!");
                    }
                    if (!isLt2M) {
                        this.$message.error("上传文件大小不能超过 2MB!");
                    }
                    return file.type === "application/pdf" && isLt2M;
                },
              
      
    }
    }
    </script>