vue-cli3中关于文件上传及本地下载静态资源的引用问题

一、element ui 中upload文件自定义上传

1.文件单独上传结合表单

（1）自定义上传

设置http-request属性，可以覆盖action的操作,采用此方式后台通常返回对应的url

2.文件信息及表单一次性上传

（1）多文件

注：一般后台接收文件信息都是form-data格式，以file命名。

• 多个文件调用多次接口

触发upload组件中的一个方法submit。例如：this.$refs.mutipleFile.submit(),此时会触发组建中自动上传属性后面跟的上传函数。

• 多文件一次性调用接口

使用 以下方式，将多个文件信息都append进file中就可以多个文件只触发一次接口

this.fileList.forEach(el => {        formData.append('file', el.raw)      })

具体可以参考博客文：https://blog.csdn.net/a_helloword/article/details/119697557

（3）上传之后清空已上传列表

组件的clearFiles（）方法

二、文件下载

1.前端本地项目下载

• 相对地址【不正确】

  vuecli3框架中，利用相对路径来引用的起点都是正对于index.html的，index.html与public处于同一个目录下，所以引用public下的资源时，以“./"开头

  静态资源在vue-cli3框架中，把资源放在assest中的static文件中来引用是获取不到的，且public文件下的内容是不会在打包时进行编译的

  注意：此处一个坑，就是使用相对路径，在本地开发的时候可以获取到文件资源，但是打包部署之后就会出错

• 绝对路径

  在js中使用

  在引用public资源的时候，应该使用绝对路径，为了保证打包部署后不出错，这个绝对路径的根目录需要动态获取process.env.BASE_URL

  在html文件中使用

  <%= BASE_URL %>

  例如：

参考博文：1.https://www.jianshu.com/p/820659d5c120

2.https://blog.csdn.net/qq_41606029/article/details/103274044