关于vue+element上传文件post请求

关于vue+element上传文件post请求
由于项目要求这里要实现点击上传文件

在这里插入图片描述
首先，我们需要写个上传组件

  <el-upload
          class="upload-demo"
          :action="doupload()"
          :before-upload="before_Upload"
          ref="newupload"
          :data="data"
           multiple
          :file-list="fileList"
          >
          <el-button style="background-color:#F95714;border-radius:4px;width:220px;height:40px;color:#fff" >上传附件</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>

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

  doupload() {
        return api.uploadAnnexInfo/  // 一次接口
      },
    //上传
      before_Upload(file) {
      //  表单提交方式
        let FormDatas = new FormData()
        FormDatas.append('file',file)
        FormDatas.append('bizTable','candidate')  //其他参数
        FormDatas.append('bizId','6')//候选人id<===========!
        console.log(FormDatas)
          let that = this
          that.$http({
            method:'post',
            url:api.uploadAnnexInfo,   //  二次接口
            headers:headers('multipart/form-data'),
            data:FormDatas
          }).then(function(res){
           if(res.data.code==10000){
              that.$message.success(res.data.msg);
            }else{
              that.$message.error(res.data.msg);
            }
          })
      },

二、常用方法介绍
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+element上传文件post请求

猜你喜欢