element 如何实现文件上传下载导出
上传：
前端：
<div><el-dialogtitle="低值易耗文件上传":visible.sync="dialogUploadVis"width="25%"><el-uploadclass="upload-demo"drag:on-change="handleChange":file-list="upload.fileList":multiple="false":auto-upload="false":http-request="uploadFile"action="string"ref="upload"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip" style="text-align: center;">仅允许导入xlsx、xls格式文件。<el-link type="primary" :underline="false">下载模板</el-link></div></el-upload><span slot="footer" class="dialog-footer"><el-button type="primary" @click="uploadButSubmit">确 定</el-button><el-button @click="dialogUploadVis = false">取 消</el-button></span></el-dialog>
</div><script>
data(){
return(
upload: {fileList: [],formData: ''},
)} methods: {submitUpload() {this.$refs.upload.submit()},delFile() {this.fileList = []},handleChange(file, fileList) {this.fileList = fileList},//自定义上传文件uploadFile(file) {//this.formData.append("file", file.file);},//保存按钮async uploadButSubmit() {let formData = new FormData()console.log(this.fileList)formData.append('file', this.fileList[0].raw) //拿到存在fileList的文件存放到formData中await ****(formData).then(res => {this.$message({message: res,type: 'success'})this.$emit('closeUpload')}).catch(res => {this.$message({message: res,type: 'error'})})},}
</script>下载：
导出：
前端：
<div>
<el-button type="warning" @click="downloadBut"><i class="el-icon-download"></i> 导出</el-button>
</div>//api
//requestMultipart 为文件请求方式
export function ****() {return requestMultipart({url: '*****',method: 'get',params: {*****},responseType: 'blob'})
}//npm install file-saver --save
import FileSaver from 'file-saver'<script>async downloadBut() {await *****().then(res => {FileSaver.saveAs(new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }),`低值易耗.xlsx`)}).catch()},
</script>