最近公司的一个二期项目，开始要求复刻原有一期的功能页面。原先一期又不打算继续维护了，源码都没有。页面基本都涉及到了文件上传，以前很少使用到这个组件，公司有现成的表单设计器，文件上传都在组件里面拖动上传。在这里记录一下这个组件基本的使用吧。

vue2的项目，在vue3里面使用element-plus的上传组件的话，应该差不多。

        <el-upload
          class="upload-demo"
          drag
          :action="importUrl"
          :data="importData"
          :on-success="handleImportSuccess"
          :accept="'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传对应的模板文件</div>
        </el-upload>

el-upload这个组件在官网里面有完整的参数，这边记录一下用到的。

action是要求是一个接口地址，如果设置了auto-upload自动上传，当选择了文件或拖动文件到对应区域后便会自动调用这个接口将文件上传上去。

如果后台的接口没有其他什么params参数，只有post请求时候的data数据的话，这里不用变量直接写死就好了。如果接口带一个params参数，比如某个随机数r。这个时候就要写成变量，并将自动上传参数设置为关闭。然后设置上传之前的事件，在那个事件里面重新为importUrl进行赋值，改变接口地址。

组件默认的在post请求的data参数里面，文件内容的参数是file，如果后台接口要求传递文件数据的参数不叫file，那么可以通过组件的另一个属性name手动更改为需要的。

 除了设置data里面文件的属性名，还可以设置data的其他参数。它们会和上面的文件数据一起作为上传接口的data参数。

假如你指定了这个组件的data值为{name:'2233'}，那么在你上传文件的时候，你会看到你的post接口的data传参会是：{ file: '二进制数据', name: '2233' }

 el-upload通常会和列表一起显示，显示总共有多少资源文件，方便删除和添加。

在打开某个详情地址的时候，一般需要单独调用一个文件详情接口，来查看这个对象有多少关联的资源文件。返回了一个数组之后，就可以动态的设置file-list的值来显示已有文件。

还需要考虑用户的删除和添加操作，有些时候这种操作要求不会立即生效，需要点击某个保存按钮生效的时候。最好的做法是，记录用户的操作。

文件上传是一定会要上传上去的，上传成功之后，会返回文件资源的唯一标识。保存刚打开时候请求的资源列表，记录用户上传的所有文件的唯一标识，记录用户删除过的文件资源标识。在保存的时候进行对比，在用户保存的时候，判断是否要调用删除文件的接口。