【前端相关】elementui使用el-upload组件实现自定义上传

本文介绍: 官方的描述是说覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。elmentui 中的upload 默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。先定义了一个 el–upload 标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在。在这个函数里面，我实现了自定义文件上传的请求。上传文件之前的钩子，参数为上传的文件，若返回。

elmentui 中的upload 默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。但是这种url 提交文件的方式，在实际的项目环境中往往是不可取的。

我们的服务器会拦截所有的请求，进行权限控制，密钥检查，请求头分析等安全行为控制。写在这里的url无法实现定义请求参数之类的，就更不能进行后面的操作了。

所以最恰当的方式，就是自定义文件的上传行为。

el–upload 中有一个属性 http–request ，官方的描述是说覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。绑定的方法，会在【文件上传】事件触发后再触发。比如说，你先选择文件，点击【上传】按钮，触发上传事件，才会触发到 http–request 中绑定的函数。

先定义了一个 el–upload 标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在http–request 中绑定了我自定义的 handleFileUp load 函数。在这个函数里面，我实现了自定义文件上传的请求。里面的button，用来上传文件的。

&lt;el-upload
  class="upload-demo"
  action="#"
  ref="upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList"
  :http-request="handleFileUpload"
  &gt;
  &lt;i class="el-icon-upload"&gt;&lt;/i&gt;
  &lt;div class="el-upload__text"&gt;
     将文件拖到此处，或 <em&gt;点击选取</em&gt;
  </div>
</el-upload>

data(){
    return {
      loading = false,
      fileList: [], //深拷贝，判断重名及第一步时的文件信息展示
    };
}

methods: {
      // 处理移除操作
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 处理预览操作
      handlePreview(file) {
        console.log(file);
      },
      // 处理超出图片个数操作
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      // 移除之前的操作
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 处理文件上传操作
      handleFileUpload(file) {
      		this.loading = true;
          // 调用后端服务器的接口
      		uploadFile(file.file).then((resp) => {
      			this.form.installImgUrl = resp.url;
      		}).catch((e) => {
      			this.$message.error(e.message);
      			this.$refs.upload.clearFiles();
      		})
      }
    }

::v-deep .el-upload-list {
  display: none !important;
}

<el-upload
  class="upload-demo"
  action="#"
  ref="upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :auto-upload="false"
  :on-exceed="handleExceed"
  :file-list="fileList"
  :http-request="handleFileUpload"
  >
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">
     将文件拖到此处，或 <em>点击选取</em>
  </div>
</el-upload>
<div class="upload-btn">
      <el-button type="primary" @click="submitUpload" :loading="loading">确 定</el-button>
</div>

data(){
    return {
      loading = false,
      fileList: [], //深拷贝，判断重名及第一步时的文件信息展示
    };
}

methods: {
      // 处理移除操作
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 处理预览操作
      handlePreview(file) {
        console.log(file);
      },
      // 处理超出图片个数操作
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      // 移除之前的操作
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 处理文件上传操作
      handleFileUpload(file) {
      		this.loading = true;
          // 调用后端服务器的接口
      		uploadFile(file.file).then((resp) => {
      			this.form.installImgUrl = resp.url;
      		}).catch((e) => {
      			this.$message.error(e.message);
      			this.$refs.upload.clearFiles();
      		})
      },
      submitUpload() {
      	 this.$refs.upload.submit();
      }
    }

  mounted() {
    if (this.$route.query.type === 'folder') {
      this.$nextTick(() => {
        document.querySelector('.el-upload__input').webkitdirectory = true
      })
    }
  },