Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Upload:

front end:

<div>
  <el-dialog
      title="低值易耗文件上传"
      :visible.sync="dialogUploadVis"
      width="25%"
    >
      <el-upload
        class="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>

download:

Export:

front end:

<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>