ele上传文件(vue)

贴上ele官网

自定义上传文件后缀类型与上传文件大小

action	--必选参数，上传的地址	
headers	--设置上传的请求头部	
multiple	--是否支持多选文件	
data	--上传时附带的额外参数	
name	--上传的文件字段名	
with-credentials	--支持发送 cookie 凭证信息	
show-file-list	--是否显示已上传文件列表	
drag	--是否启用拖拽上传	
accept	--接受上传的文件类型（thumbnail-mode 模式下此参数无效）
on-preview	--点击文件列表中已上传的文件时的钩子	function(file)	
on-remove	--文件列表移除文件时的钩子	function(file, fileList)
on-success	--文件上传成功时的钩子	function(response, file, fileList)
on-error	--文件上传失败时的钩子	function(err, file, fileList)
on-progress	--文件上传时的钩子	function(event, file, fileList)	
on-change	--文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	
before-upload	--上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 
                 reject，则停止上传。	function(file)	
before-remove	--删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 
                  Promise 且被 reject，则停止删除。	function(file, fileList)	—	—
list-type	--文件列表的类型	string	text/picture/picture-card	
auto-upload	--是否在选取文件后立即进行上传	
file-list	--上传的文件列表
http-request	--覆盖默认的上传行为，可以自定义上传的实现	
disabled	--是否禁用
limit	--最大允许上传个数	
on-exceed	--文件超出个数限制时的钩子	function(files, fileList)	

ele上传文件

渲染已请求文件在页面

action为请求接口地址(必填)
headers如带token需把token单独放在请求头上
对应上传时间填写(可填)
accept//限制上传类型格式
on-preview点击文件对应列表(文件)
on-success文件上传成功
fileList对应上传文件的列表
before-upload上传之前的操作(限制提示上传格式)


:before-remove="()=>false"//禁止删除功能

 <el-upload
          :before-remove="()=>false"
                class="upload-demo"
                :action="action"
                :before-upload="beforeUpload"
                :data="fileData"
                :headers="headers"
                 accept=".doc,.xlsx,.pdf,.jpg,.png"
                :on-success="fileSuccessFunc"
                :on-preview="handlePreview"
                :file-list="fileList"
              >
                <el-button
                  size="mini"
                >点击上传</el-button>
                <div
                  slot="tip"
                  class="el-upload__tip"
                >只能上传doc/xlsx/pdf/jpg/png文件，且不超过2MB</div>
              </el-upload>
              

data(){
    return{
         action:"https//XXXXXXX(接口地址)",
         headers: {},
         fileDatas:[],//接收上传成功的数据
        fileList:[],//必填(用来存储上传后的文件列表)
    }
}

 beforeUpload(file) {//上传之前的限制文件格式
      this.headers.后端规定token名称 = 'XXXXXXXXXXXXXX';//token(用来放token)
      this.headers.time = new Date().getTime;//可选
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["doc", "xlsx", "pdf", "jpg", "png"];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message({
          message: '上传文件只能是doc(Doc), xlsx(Xlsx), pdf(Pdf), jpg(Jpg), png(Png)格式',
          type: 'warning'
        });
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过2MB',
          type: 'warning'
        });
        return false;
      }
    },
    // 上传成功
    fileSuccessFunc(response, file, fileList) {
    //实现多个数据放在数组中
    var arr=[]
    arr=[...arr,respose.data.url];
     this.fileDatas=arr//上传成功的数据
    },
     handlePreview(file) {
     //这个是上传后定位对应单个文件
    //单个文件列表值
     var that = this;
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
     console.log(file);//单个文件的值
  }

PS

one.jpg,two.pdf
把对应的后缀去掉只要前面数值怎么搞呢?
如下所示

    var a="a.jpg";
    var b=a.split(".")[0];
    console.log(b);//a

参考有的小米华为自带浏览器打不开图片解决

ele上传图片