vue element 上传

背景

• ui: element ui
• js: vue
  在前端开发过程中，会经常用到文件上传的功能，如下：

附：php 上传文件处理

视图部分

<template>
    <el-form v-loading="uploading" ref="shopConfigForm" :rules="rules" :model="shopConfigForm" label-width="140px">
        <el-form-item label="" prop="remark">
          <el-upload
            ref="upload"
            :limit="1"
            :before-upload="handleBeforeUpload"
            :on-success="handleUploadSuccess"
            :action="uploadUrl"
            class="upload-demo"
            name = "file"
          >
            <el-button size="small" type="primary">上传文件导入</el-button>
          </el-upload>
          <br>
          <div class="tips-mark">
            <span>【上传注意事项】</span>
            <ol>
              <li>请<span class="marks-text">严格(列的顺序、每列的含义)</span>保证文件格式表一致</li>
            </ol>
          </div>
        </el-form-item>
</template>

js 部分

data() {
    return {
        uploadUrl: process.env.BASE_API + '?r=match/match-alerts/upload',
        uploading: false
    }
}
handleBeforeUpload(file) {
      this.uploading = true
      return true
    },
    handleUploadSuccess(response, file, fileList) {
      this.uploading = false
      if (response.code === 200) {
        this.$refs.upload.clearFiles()
        this.$message.success('上传成功')
      } else {
        if (response.data !== undefined) response.msg += '：' + response.data
        this.$message.error(response.msg)
      }
    },