一.上面解说一些upload组件中罕用的属性及办法

  1. 属性
limit： 限度文件上传个数，单个文件可设置为1，根据需要设置个数。accept：限度抉择上传文件时的类型（常见类型：jpg/png/xls/xlxs/doc 等）multiple： 多文件上传时可设置为trueauto-upload： 主动上传，独自上传文件到服务器（不须要和表单一起提交时可设置）action：上传文件的地址。当咱们设置了auto-upload为true时，组件会主动依照action的地址提交。如果不须要独自上传，这个属性可设置为none。

2.办法

on-preview：图片的话可做放大操作【window.open()】，对于文件能够做下载附件的操作，具体方法为window.location.href()。on-remove： 文件列表移除文件触发before-upload：上传文件前触发的函数，如果auto-upload敞开 不会主动上传，这个钩子函数也不会触发on-exceed： 超出文件个数限度的钩子函数，能够在用户抉择超过文件个数时，给出有好的提醒。on-change：文件状态扭转时的钩子，增加文件、上传胜利和上传失败时都会被调用。

3.具体代码

template局部
      <el-form-item label="上传附件" class="form-item-100" prop="file">          <el-upload            class="upload-demo"            action="none"            :file-list="fileList"            :on-exceed="handleExceed"            :on-remove="handleRemove"            :on-change="handleChange"            :on-preview="downloadFile"            :auto-upload="false"            :limit="1"          >            <el-button size="small" type="primary">点击上传</el-button>          </el-upload>        </el-form-item>
methods局部
    // 超出文件限度    handleExceed (files, fileList) {      this.$message.warning(`以后限度上传1个文件，共抉择了 ${fileList.length} 个文件`);    },    // 文件列表移除文件时的钩子    handleRemove (file, fileList) {      this.fileList = fileList    },    // 上传文件    handleChange (file, fileList) {      this.fileList = fileList    },    // 下载附件    downloadFile (file) {      window.location.href = file.raw // raw二进制文件    },

二.上传文件与表单独特提交

提交表单办法 应用multipart/form-data;格局传参

 let file = ""      file = this.fileList.length ? this.fileList[0].raw : ''      let formData = new FormData()      formData.append('id', this.infoForm.id)      formData.append('fblx', this.infoForm.fblx)      formData.append('fbnr', this.infoForm.fbnr)      formData.append('fb_rqsj', this.infoForm.fb_rqsj)      formData.append('ggdj', this.infoForm.ggdj)      formData.append('fbqxxqdm', this.infoForm.fbqxxqdm)      formData.append('fbqxxqjb', this.infoForm.fbqxxqjb)      formData.append('ggbt', this.infoForm.ggbt)      formData.append('fbqxlb', this.infoForm.fbqxlb)      formData.append('file', file) formPost('/zhyq/notice/v1/update', formData, {        headers: {          'Content-Type': 'multipart/form-data; charset=utf-8'        },      }).then(res => {        this.$message({          message: "编辑胜利!",          type: "success"        });        this.infoShow = false;        this.init();      }).catch(err => {      });