Vue上传文件:ElementUI中的upload实现

Posted 古兰精

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue上传文件:ElementUI中的upload实现相关的知识,希望对你有一定的参考价值。

一、上传文件实现

  两种实现方式:

1、直接action

<el-upload
  class="upload-file"
  drag
  :action="doUpload"
  :data="pppss">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>

  :action,必选参数,上传的地址,String类型。data()需要使用代理转发,要不然会有跨域的问题

  :data,上传时附带的额外参数,object类型。用于传递其他的需要携带的参数,比如下面的srid

data(){
    return {
        ,doUpload:/api/up/file
        ,pppss:{
            srid:‘‘
        }
    }
},

2、利用before-upload属性

  此种方式有个弊端,就是action是必选的参数,那么action如果和post的url一致,总会请求2次,所以一般把action随便写一个url,虽然不影响最终效果,但是这样会在控制台总有404错误报出

<el-upload
  class="upload-file"
  drag
  :action="doUpload"
  :before-upload="beforeUpload"
  ref="newupload"
  multiple
  :auto-upload="false">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
beforeUpload(file){
    let fd = new FormData();
    fd.append(file,file);//传文件
    fd.append(srid,this.aqForm.srid);//传其他参数
    axios.post(/api/up/file,fd).then(function(res){
            alert(成功);
    })
},
newSubmitForm(){//确定上传
    this.$refs.newupload.submit();
}

二、常用方法介绍

1、动态改变action地址

  action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,实现动态的去修改上传地址

//html 代码
<el-upload  :action="UploadUrl()"  :on-success="UploadSuccess" :file-list="fileList">
    <el-button size="small" type="primary" >点击上传</el-button>
</el-upload>

// js 代码在 methods中写入需要调用的方法
methods:{
    UploadUrl:function(){
        return "返回需要上传的地址";     
    }   
}   

2、在文件上传前做类型大小等限制

(1)一种方式是,加accpet属性

<el-upload class="upload-demo" :multiple="true" :action="action" accept="image/jpeg,image/gif,image/png,image/bmp" 
:file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">

(2)另一种方式是在上传前的触发函数里面去判断

beforeAvatarUpload(file) {
    const isJPG = file.type === image/jpeg;
    const isGIF = file.type === image/gif;
    const isPNG = file.type === image/png;
    const isBMP = file.type === image/bmp;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip(上传图片必须是JPG/GIF/PNG/BMP 格式!);
    }
    if (!isLt2M) {
        this.common.errorTip(上传图片大小不能超过 2MB!);
    }
    return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
},

3、同时传递form表单及有多个upload文件该如何传递

newSubmitForm () {
  this.$refs[newform].validate((valid) => {
    if (valid) {
      //表单的数据
      this.uploadForm.append(expName, this.newform.expName)
      this.uploadForm.append(expSn, this.newform.expSn)
      this.uploadForm.append(groupId, this.newgroupId)
      this.uploadForm.append(subGroupId, this.newsubgroupId)
      this.uploadForm.append(expvmDifficulty, this.newform.expvmDifficulty)
      
      newExp(this.uploadForm).then(res => {
        if (res.code === 400) {
          this.$message.error(res.error)
        } else if (res.code === 200) {
          this.$message.success(上传成功!)
        
        }
      })
      this.$refs.uploadhtml.submit()   // 提交时分别触发各上传组件的before-upload函数
      this.$refs.uploadfile.submit()
      this.$refs.uploadvideo.submit()   
    } else {
      console.log(error submit!!)
      return false
    }
  })
},
newHtml (file) {   // before-upload
  this.uploadForm.append(html, file)
  return false
},
newFiles (file) {
  this.uploadForm.append(file[], file)
  return false
},
newVideo (file) {
  this.uploadForm.append(video, file)
  return false
}
export function newExp (data) {
  return axios({
    method: post,  // 方式一定是post
    url: 你的后台接收函数路径,
    timeout: 20000,
    data: data        // 参数需要是单一的formData形式
  })
}

  注意:(1)对于多个上传组件来说,需要分别触发,去给FormData append数据

  (2)接收多文件一定要是数组形式的file[],this.uploadForm.append(‘file[]‘, file)

4、如何传递文件和其他参数

  就像第一节那样,如果不使用action实现上传,而使用before-upload属性也能实现上传的效果。

  before-upload属性,这是一个function类型的属性,默认参数是当前文件,只要能传递这个文件也能实现效果

  要传递这个方法就需要new一个formdata对象,然后对这个对象追加key和value,类似于postman测试时那样。

  另外注意:传递formdata和data不能一起传递,要传递formdata就不能有data,所以对于其他参数的传递,也要改为

beforeUpload (file,id) {
    let fd = new FormData()
    fd.append(file, file)
    fd.append(id,id)//其他参数
    axios.post(url, fd, {
         
    })
 },

  而不能使用这种又有FormData,又有data的模式

beforeUpload (file,id) {
        let fd = new FormData()
        fd.append(key, file, fileName)
        axios.post(url, fd,{
          data:{
           id:id
          },
          headers: {
           Content-Type: multipart/form-data
          }
        })
     },

 

以上是关于Vue上传文件:ElementUI中的upload实现的主要内容,如果未能解决你的问题,请参考以下文章

vue+elementui el-upload上传文件携带参数

vue+elementUi+upload上传文件检测类型和大小includescreateObjectURLuploaddisplayjustifyradius

vue+elementui自定义上传文件

vue+elementui el-upload 上传文件时携带其他的参数

vue + elementui upload上传图片到服务器以及保存后回显问题

elementUI+el-upload 上传文件大小与文件类型校验