element上传文件用法

使用el-upload

  <div class="upload-container">
    <el-upload
      class="upload-demo"
      :action="action" //上传接口路径
      :headers="headers" //请求头
      :multiple="false" //选择多张
      :limit="1" //限制上传个数
      :on-preview="handlePreview" //上传后触发
      :on-remove="handleRemove"  //删除触发
      :before-remove="beforeRemove" //删除前触发
      :on-exceed="handleExceed" //文件超出限制触发
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>


//process.env.VUE_APP_BASE_API 获取请求api主路径
data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/book/upload`, //上传接口路径
      headers: {
        Authorization: `Bearer ${getToken()}`,
      },
    };
  },