element的upload组件，自定义http-request，将文件内容与其他内容一起上传

一、upload上传文件时，不立即上传，而是保存文件数据与其他内容一起上传

包含功能：

• 自定义http-request上传函数，保存文件数据与表单其他内容一同提交
• 文件el-upload必填校验，文件名格式，文件类型，文件大小校验

几个需要注意的点：

• 虽然不使用action，但是要保留该属性，否则会出错
• 当使用自定义提交函数http-request覆盖默认上传行为时，要设置立即上传属性为true:auto-upload="true"
• 当需要校验文件必选时，在清除文件on-remove和自定义上传函数http-request中都需要手动调用一遍校验

 <template>
   <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
     <el-form-item label="上传文件:" prop="fileList">
        <el-upload
          class="upload-demo"
          action
          :limit="1"
          :multiple="false"
          :auto-upload="true"
          :http-request="httpRequest"
          :before-upload="beforeUpload"
          :on-remove="afterRemove"
          accept=".zip, .rar, .bin, .apk"
          v-model="formData.fileList"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="tip-box">
            <div class="el-upload__tip">文件类型支持.zip .rar .bin .apk；文件大小不超过2GB</div>
            <div class="el-upload__tip">文件名称须为1~20个英文、数字、点号、连字符或下划线</div>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
  </template>
  <script>
  export default {
    data() {
      return {
        formData: {
          file: {},
          fileList: [],
        },
        rules: {
          fileList: [{ required: true, message: '请选择上传文件', trigger: 'blur' }],
        },
      }
    },
    methods: {
      // 自定义的提交函数，取出文件设置进请求参数
      httpRequest(param) {
        this.formData.file = param.file
        this.formData.fileList.push(param.file)
        this.$refs['form'].validate()
      },
      // 清除文件
      afterRemove() {
        this.$set(this.formData, 'file', {})
        this.$set(this.formData, 'fileList', [])
        this.$refs['form'].validate()
      },
      //限制上传时的文件格式大小
      beforeUpload(file) {
        // 获取文件名（不包括文件类型后缀）
        let nameArray = file.name.split('.')
        nameArray.pop(1)
        let name = nameArray.join('.')
        
        const isType = /.zip$|.rar$|.bin$|.apk$/.test(file.name)
        const isName = /^[a-zA-Z0-9\-_\.]{1,20}$/.test(name)
        const isLt2M = file.size / 1024 / 1024 / 1024 < 2
        if (!isType) {
          this.$message.error('上传文件只能是.zip .rar .bin .apk格式!')
          return false
        }
        if (!isName) {
          this.$message.error('上传文件名称需为1~20个英文、数字、点号、连字符或下划线')
          return Promise.reject(false)
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 512k!')
          return false
        }
      },
    },
  }
  </script>

二、当接口数据需要以multipart/form-data格式上传时，前端应当如何处理

1. 数据处理：

假设表单数据已经保存在了

this.formData

中

只有几个数据需要追加时

// 1.定义formData类型数据
let formDataParams = new FormData()
// 2. 将表单内容追加到该数据内
formDataParams.append('file', this.formData.file)
// 3. 向接口传递数据
 add(formDataParams).then(() => {
    this.$message.success('新增成功')
  })

多个数据需要追加时

// 1.定义formData类型数据
let formDataParams = new FormData()
// 2. 将表单内容追加到该数据内
let options = Object.keys(this.formData)
for (const key of options) {
  formDataParams.append('key', this.formData[key])
}
// 3. 向接口传递数据
 add(formDataParams).then(() => {
    this.$message.success('新增成功')
  })

2. axios接口定义：

// 新增
export function add(data) {
  return request({
    url: `/api/xxx`,
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

参考链接

1. ElementUI文件上传组件，表单数据和文件一起提交，以及对象转form表单，对象的拷贝
2. elementUI 上传组件 http-request的注意事项