learning_record_doc/front_end/vue/element upload手动文件上传，多文件上传.md

#### 自定义文件上传

```
<template>
  <el-dialog
    title="匿名反馈"
    :visible.sync="visible"
    @close="closeFeedbackDialog"
  >
    <el-form>
      <el-form-item :label-position="labelPosition" label="附件">
        <!--
          limit 最多选择一个文件进行上传，
          http-request 上传所执行的方法，上传多个文件便执行多次
          auto-upload 选中文件后自动进行上传
         -->
        <el-upload
          style="width:100%"
          drag
          action="/"
          ref="upload"
          :limit="1"  
          :http-request="httpRequest"
          :auto-upload="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            附件总大小不能超过100MB
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFeedbackDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="sendFeedback"
        v-loading.fullscreen.lock="fullscreenLoading"
        element-loading-text="邮件正在发送请稍等"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      visible: false,
      feedback: {
        title: '匿名反馈',
        to: '123@qq.com'
      },
      labelPosition: 'top',
      fileList: [],
      fileData: null,
      fileSize: 0,
      fullscreenLoading: false
    }
  },
  methods: {
    // 关闭对话框并重置
    closeFeedbackDialog() {
      this.reset()
      this.visible = false
    },
    // param中获取文件对象 进行上传，如果多个文件会执行多次此方法发送多个请求
    httpRequest(param) {
      this.fileSize = 0
      this.fileSize = param.file.size
      //验证文件大小
      if (this.fileSize / 1024 / 1024 >= 100) {
        this.$message.error('附件总大小不能超过100MB')
        return
      }
      this.fileData = new FormData();
      //获取文件
      this.fileData.append('files', param.file)
      //如果需要其他参数可以使用append进行添加
      this.fileData.append('to', this.feedback.to)
      this.fileData.append('title', this.feedback.title)
      //上传地址
      let url = 'http://192.168.3.101:60001/mail/send'
      //配置请求头信息
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      //开启加载
      this.fullscreenLoading = true
      //进行请求
      axios.post(url, this.fileData, config).then(res => {
        //关闭加载
        this.fullscreenLoading = false
        if (res.data.code === 1) {
          this.$message.success('发送成功')
          //上传成功执行关闭方法关闭对话框
          this.closeFeedbackDialog()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error=>{
        this.fullscreenLoading = false
        this.$message.error("发送邮件时出现异常,请联系管理员！")
      })
    },
    //发送邮件
    sendFeedback() {
      //提交时自动执行httpRequest方法保存要上传的文件到this.fileData
      this.$refs.upload.submit()
    },
    reset() {
      this.fileList = []
    }
  }
}
</script>
<style>
.el-upload {
  width: 100% !important;
}
.el-upload-dragger {
  width: 100% !important;
}
</style>
```

#### 一次请求上传多个文件（推荐使用）

```
<template>
  <el-dialog
    title="匿名反馈"
    :visible.sync="visible"
    @close="closeFeedbackDialog"
  >
    <el-form>
      <el-form-item :label-position="labelPosition" label="附件">
      <!--
          file-list 选中的文件列表，
          http-request 上传所执行的方法，上传多个文件便执行多次
          auto-upload 选中文件自动上传
         -->
        <el-upload
          style="width:100%"
          class="upload"
          drag
          action="/"
          multiple
          ref="upload"
          :http-request="httpRequest"
          :auto-upload="false"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            附件总大小不能超过100MB
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFeedbackDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="sendFeedback"
        v-loading.fullscreen.lock="fullscreenLoading"
        element-loading-text="邮件正在发送请稍等"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      visible: false,
      feedback: {
        title: '匿名反馈',
        to: '123@qq.com'
      },
      labelPosition: 'top',
      fileList: [],
      fileData: null,
      fileSize: 0,
      fullscreenLoading: false
    }
  },
  methods: {
    // 关闭对话框并重置
    closeFeedbackDialog() {
      this.reset()
      this.visible = false
    },
    // this.$refs.upload.submit() 提交时会自动调用 httpRequest方法，在param获取文件对象。
    httpRequest(param) {
      this.fileData.append('files', param.file)
      this.fileSize += param.file.size
    },
    //发送邮件
    sendFeedback() {
      this.fileSize = 0
      this.fileData = new FormData();
      //提交时自动执行httpRequest方法保存要上传的文件到this.fileData
      this.$refs.upload.submit()
      //验证文件大小
      if (this.fileSize / 1024 / 1024 >= 100) {
        this.$message.error('附件总大小不能超过100MB')
        return
      }
      //如果需要其他参数可以使用append进行添加
      this.fileData.append('to', this.feedback.to)
      this.fileData.append('title', this.feedback.title)
      //上传地址
      let url = 'http://192.168.3.101:60001/mail/send'
      //配置请求头信息
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      //开启加载
      this.fullscreenLoading = true
      //进行请求
      axios.post(url, this.fileData, config).then(res => {
        //关闭加载
        this.fullscreenLoading = false
        if (res.data.code === 1) {
          this.$message.success('发送成功')
          //上传成功执行关闭方法关闭对话框
          this.closeFeedbackDialog()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error=>{
        this.fullscreenLoading = false
        this.$message.error("发送邮件时出现异常,请联系管理员！")
      })
    },
    reset() {
      this.fileList = []
    }
  }
}
</script>
<style>
.el-upload {
  width: 100% !important;
}
.el-upload-dragger {
  width: 100% !important;
}
</style>
```