vue+ element组件上传（与表单共同提交）与下载

一.下面讲解一些upload组件中常用的属性及方法

1. 属性

limit： 限制文件上传个数，单个文件可设置为1，依据需求设置个数。

accept：限制选择上传文件时的类型（常见类型：jpg/png/xls/xlxs/doc 等）

multiple： 多文件上传时可设置为true

auto-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 => {
      });