vue前端获取项目下的静态资源文件夹中的文件并下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue前端获取项目下的静态资源文件夹中的文件并下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.图片

前端项目/public/static/image文件夹下，两张图片，因为不会经常改变所以做成静态资源
前端下载本地静态文件,vue,前端,vue.js,javascript
从项目中获取这两张图片

//require.context（检索目录、是否检索子文件、正则表达式匹配的）
const requireContext = require.context('../../../public/static/image/', false, /^\.\/.*$/) 
requireContext.keys().forEach(key=>{
	// console.log(key)    // 输出./image.jpg
	let file = key.substring(2)
	this.imageList.push('../../../static/image/'+file)
})

html：

<!--展示轮播图-->
<van-swipe class="swipe" autoplay="3000">
	<van-swipe-item v-for="(item,index) in imageList" :key="index" :title="item.name">
		<van-image width="100%" height="5rem" :src="item" :alt="item"/>
	</van-swipe-item>
</van-swipe>

2.文件

前端项目的 \public\static\faultFile文件夹中放入模板文件：
前端下载本地静态文件,vue,前端,vue.js,javascript

实现效果：

前端下载本地静态文件,vue,前端,vue.js,javascript
代码：

前端下载使用< a >标签的自带的download下载

<el-dialog title="下载模板" :visible.sync="showDialog" width="600px" @close="close">
	<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul" v-show="fileList.length>0">
		<li class="el-upload-list__item ele-upload-list__item-content" v-for="(item,index) in fileList" :key="index">
			<el-link :underline="false" target="_blank">
				<a class="el-icon-download" style="color:#1890ff;margin-left: 7px;" :href="process+'/static/faultFile/'+item" :download="item">{{item}}</a>
			</el-link>
		</li>
	</transition-group>
</el-dialog>

......js部门在下面

<style scoped>
.upload-file-uploader {
  margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}

.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}

.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>

export default {
  name: "DownTemplate",
  data(){
    return{
      //这个是部署前端包时的包名，访问静态文件的时候需要加上包名（和vue.config.js里的publicPath保持一致）
      process: process.env.VUE_APP_NAME,  
      showDialog: false,
      fileList: [],
    }
  },
  methods:{
  	//打开下载模板dialog
    open() {
      this.showDialog = true
      //获取文件夹中的文件名称，放进fileList中
      const files = require.context("../../../../../public/static/faultFile/", true, /\.doc$/); //只获取文件夹中.doc结尾的文件
      files.keys().forEach(item=>{
        this.fileList.push(item.substring(2))
      })
       
    },
    close(){
      this.fileList = []
    },
  },
}