文件上传

<li class="purchase-li">
              <label class="col-md-2 label-name">上传文件</label>
              <div class="li-content">
                <a class='uploadbtn'>
                  <img src="../../../../assets/content_icon/upload.png" alt="">
                  <input type="file" multiple @change="fileChange"  ref='upload'/>
                </a>
                <div class="form-content file-box">
                  <p v-for="(item, index) in firewall.attachment_list" :key="index">
                    <span style="font-size:14px;display:inline-block;">{{item.name}}</span>
                    <img @click="deleteFile(index)" src="../../../../assets/content_icon/close.png" alt="" >
                  </p>
                </div>
              </div>
          </li>

1.上传表单

   //上传文件
      fileChange(){
        let files = this.$refs.upload.files
        if(!files){
          return
        }
        // 校验文件大小
        let filesSize = 0
        for (let index = 0; index < files.length; index++) {
          const element = files[index]
          if (element.size/1024/1024 > 10) {
            this.$Notice.warning({title:'单文件过大',desc:`单文件最大容量为10M，${element.name}文件大于10M，请重新上传！`})
            return
          }
          filesSize += element.size         
        }
        if (filesSize/1024/1024 > 20) {
          this.$Notice.warning({title:'多文件总容量最大为20M，请重新上传！'})
          return
        }        
        let formData = new FormData()
        for (let index = 0; index < files.length; index++) {
          const element = files[index]
          formData.append(`${element.name}`, element)
        }
        this.$publicMethod.uploadFile('/v1/upload/im-file',formData).then((resData)=>{
          this.firewall.attachment_list = resData
          this.$refs.upload.value = ''
        })
      },

// 上传文件函数
const uploadFile = (filePath, data,timeout) => {
  return cookies.getAuthorization().then(res=>{
    const config = {
      baseURL: baseURL,
      timeout: timeout ? timeout : 60000,
      headers: {
        'Pragma': 'no-cache',
        'Content-type': 'multipart/form-data',
        'X-Auth-Token': res || null
      },
    }
    return axios.post(filePath,data,config).then(res=>{
      return res.data
    },err=>{
      Notice.error({
        title: err.response.data.title,
        desc: err.response.data.description,
        duration: 15
      })
    })
  })
}

2.上传图片

 fileChange () {
        this.file = this.$refs.upload.files[0]
        // 校验图片
        this.$refs.upload.value = ''
        // if(this.file.size/1024 > 2048){
        //   this.$Notice.warning({title:'该图片超过了2MB!'})
        //   return
        // }
        if(!this.file.type || this.file.type && this.file.type !== 'application/pdf'  && this.file.type !== 'application/msword' && this.file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'){
          this.$Notice.warning({title:'文件格式不正确！'})
          this.file = ''
          return
        }
        let base64_img = new FileReader()
        base64_img.readAsDataURL(this.file)
        base64_img.onload = async e =>{
          this.form.file_path = await this.uploadFile({file_name:this.file.name,file:e.target.result,type:'contract'})
        }
      },
      uploadFile(params){
        return this.$httpRequestEntrance.httpRequestEntrance('POST', '/v1/medias',params, (res) => {
          return res.path
        })
      },