这次也是在使用upload时遇到的问题。 需求是上传后可以直接下载文件。
　　而项目中是使用oss做上传和存储的，为了保护资源，并做了refer校验。也就是说，上传后的资源只能在当前域名下下载有效，一旦打开新页面就会被拒绝访问和下载。

　　原有的方式　　　

 <a-upload 
                      :file-list="defaultFileList"
                      :before-upload="beforeUpLoad"
                      :showUploadList="{
                        showRemoveIcon: false
                      }"
                      :customRequest="newFileAdd">
            </a-upload>

 

　　这里发现了问题，在上传文件后，每次直接点击列表的文件都会跳转新页面，对文件路径进行访问。 这样直接就被oss验证给拒绝了。 

　　一开始，一直在纠结需不需要重新创建一个可以公共访问的上传路径，这样可以直接访问上传的文件。 但是这样并不符合项目需求。所以重新找其他的方法。既然默认跳转新页面访问受限，那就在当前页面进行下载就可以。

　　这时候发现，ant design vue 其实提供了一个下载事件，也就是说自定义一个下载方法就可以了。  

　　这里需要注意的是ant design vue的版本，最好用最新版本。 

　　首先绑定事件配合下载按钮一起使用

　　

 <a-upload 
                      :file-list="defaultFileList"
                      :before-upload="beforeUpLoad"
                      :showUploadList="{
                        showRemoveIcon: false，

　　　　　　　　　　　　　　　　showDownloadIcon: true

                      }"
                      :customRequest="newFileAdd"
                       @download="downloadFile">
            </a-upload>                

　　但是这个时候出现一个问题，就是上传列表并不现实下载按钮。 原因是在对fileList中的对象赋值的时候，没有把status设置为done，如果是在uploading的状态下是不会现实下载按钮的。

　　修改后的代码

　　

this.defaultFileList.push(
          {
            uid: '1',
            status: 'done',
            name: "xxx",
            url: fileUrl
          }
        )

　　这样就可以了。 不还有一个小问题，就是在上传后的列表中，点击下载按钮可以下载，点击文件名称也可以下载。 看了一下上传文件后的dom结构，默认将列表的文件放在一个a标签中显示出来，而a标签的url就是刚才代码中复制的那个url，所有这个做了一个小改动，就是将filelList中对象的url属性注释掉，不适用默认的url，使用其他的自定义属性保存文件上传后的url。然后在在下载文件的时候使用自己的url属性就可以了。

　　

this.defaultFileList.push(
          {
            uid: '1',
            status: 'done',
            name: "xxx",
            //url: fileUrl
            downloadUrl:fileUrl  //下载的时候直接用这个属性
          }
        )