使用FineUploader指定自定义参数删除文件

本文主要讲述如何在删除文件时指定自定义参数，如果你对fineuploader组件知之甚少，请先参阅其它资料

前言

最近接手了一个公司项目，项目的前端使用了FineUploader组件进行上传文件，这个组件上传还是很方便的，但是在做删除操作的时候，遇到了很大的麻烦。公司使用阿里云的OSS进行对象存储，删除文件时需要制定文件的名称，该名称在文件上传到OSS之前已经做了自定义的处理，所以无法直接通过FineUploader组件删除（fineuploader组件上传和删除时，默认会传一个qquuid参数，如果你的文件名称使用该qquuid，那就没那么多麻烦了）

上传

前言已经说过，上传图片时会默认带一个qquuid参数，因为我做的项目的文件名称是自定义的，所以我这边不用这个参数。我们看看上传成功后的返回值。

  {
    "success":true,
    "fileName":"other/测试_b8bc7c553b644250a6154d2a4668a731.pdf",
    "url":"https://xxx-oss.oss-cn-shenzhen.aliyuncs.com/xxxxxxxxxxxxxxxxxxxxxxx"
}

这里的fileName是我返回的自定义文件名，接下来的删除操作就需要用它来完成。下面是重点，具体思路是：上传完成后将自定义的fileName设置到fineupload的uuid参数中，在删除的时候取这个参数

      callbacks:{
        //点击删除时触发
        onSubmitDelete: function(id) {
          //取出对应id的uuid属性，并自定义上传参数名称为fileName
          this.setDeleteFileParams({fileName: this.getUuid(id)}, id);
        },
        //上传完成后触发
        onComplete:  function(id,  fileName,  responseJSON)  {
          //将返回的自定义属性uuid设置到fineupload的uuid属性中
          //id指定当前是第几个文件
          this.setUuid(id, responseJSON.fileName) 
        }
      }

这里的callbacks是fineupload组件的回调函数，我们看一下删除时的请求参数：

删除文件时的请求参数

大功告成！