vue+element-ui实现上传及预览文件

前言

上篇文章分享了微信小程序上传及预览文件的方法，本篇文章来分享一下vue+element实现上传及预览文件的方法,upload上传文件方法，是element-ui提供的方法，主要是利用其参数绑定方法进行上传操作，有想要深入了解的/博友，可到element-ui官网查看。window.open(url)可打开想要查看的文件，这些也是我最近搜索到的并且亲自实践过的,如果觉得有用，可上滑查看实现代码。

上传文件实现代码

<!--
	show-file-list  是否显示已上传文件列表
	on-preview      点击文件列表中已上传的文件时的钩子
	action          必选参数，上传的地址
	headers         设置上传的请求头部
	on-success      文件上传成功时的钩子
	on-error        文件上传失败时的钩子
	before-upload   上传文件之前的钩子，参数为上传的文件，若返回 false 或者                                                                                                                                                                                                                                                                           
                    返回 Promise 且被 reject，则停止上传。
    limit           最大允许上传个数
                    -->
 <el-upload v-if="!file.name" style="display:inline"
            :show-file-list="false"
             class="upload-demo"
            :on-preview="handlePreview"
            :action="uploadAction"
            :on-success="handleSuccess"
            :on-error="Err"
            :limit="1"
            :headers = "headers"
            :beforeUpload="beforeUpload"
            @click.native="choose(img)">
           <el-button  style="margin-left:10px" type="text" size="small">
            选择文件
            </el-button>
  </el-upload>

 export default{
   data(){
      return {
        key:''
        uploadAction:"https://app.exbaiduer.com/api/api/fileUpload/upload-image",
        headers:{},
      }
    },
     mounted(){
      if(this.$route.query.id){
      	this.info(this.$route.query.id);
      };
      this.headers = {
        'Authorization': cookieStorage.get("token"),
      };
    },
    methods: {
     choose(k){
        this.key=k
      },
      beforeUpload(file) {
        console.log(file)
      },
    handlePreview(file) {
        console.log(file);
        window.open(file.url);
      },
     handleSuccess(response) {
         console.log(response)
        if (response.code == 0) {
          console.log("导入成功");
          this.$message.success('导入成功');
          this.img[this.key].filevalue[0].name=response.data.name;
          this.img[this.key].filevalue[0].path=response.data.path;
          console.log(this.img);
        } else {
          this.$message.error('上传失败！');
          console.log(response);
        }
      },
      Err() {
        this.$message({
          type: "error",
          message: "文件导入失败"
        });
      },
      }
      }

预览文件实现代码

<!-- 点击预览文件信息 -->
 <span @click="readFile(value,file.path)" >{{file.name}}</span>
 <!--用window.open打开预览的文件，路径是https://view.officeapps.live.com/op/view.aspx加上要预览文件的路径 -->
readFile(k,path){
        console.log(111);
        window.open('https://view.officeapps.live.com/op/view.aspx?src='+path);
      },

以上就是我要分享的vue+element实现上传及预览文件的方法，如果大佬们有更好的方法，欢迎下方评论区畅所欲言！