spfm-market-front/src/components/uploadMbh.vue

<template>
    <div>
        <el-upload
            class="upload-demo"
            action="string"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            multiple
            :file-list="fileList"
            :modal-append-to-body="false"
            drag
            ref="n_u_l_c"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击上传</div>
        </el-upload>
    </div>


</template>
<script>
import {strToFileList} from "@/utils/tv.js"
 export default {
     props:{
        fList :{required: false,type: String},
     },
    data() {
      return {
          fileList:[],
          params:{}
      }
    },
    methods: {
      handleRemove(file, fileList) {
        this.$emit("handleResult",{file, fileList});
      },
      handlePreview(file) {
      },
      beforeRemove(file, fileList) {
        return true;//this.$confirm(`确定移除 ${ file.name }？`);
      },
      beforeUpload(file){
        let query = new FormData();
        query.append("file", file);
        this.$http({
            url: "/bpm/api/upload",
            method: "post",
            headers: {"Content-Type": "application/json",},
            data: query,
        }).then((res) => {
            if(res.data.result===0){
              this.handleResult(res.data.body)
            }else{
              this.$message({ message: res.data.desc,type: 'error'});
            }
        });
      },
      handleResult(body){
        let file = {"name":body.fileName,"url":"/bmp/api/download?id=" + body.attchFileId,"attchFileId":body.attchFileId}
        this.fileList.push(file)
        let files = this.fileList
        this.$emit("handleResult",{file,files});
      },
      resetFile(fileList){
        this.fileList = fileList
      },
      getFileList(){
        return this.fileList
      },
      download(v) {
        let fileData = v;
        this.$http({
            url: '/bpm/api/download',
            method: "post",
            headers: {
                "Content-Type": "application/json",
            },
            responseType: "blob",
            data: {"id": fileData.id, "fileName": fileData.fileName},
        }).then((response) => {
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                let blob = new Blob([response.data], {
                    type: 'application/vnd.ms-excel'
                });
                window.navigator.msSaveOrOpenBlob(blob, fileData.fileName);
            } else {
                /* 火狐谷歌的文件下载方式 */
                var blob = new Blob([response.data])
                var downloadElement = document.createElement('a')
                var href = window.URL.createObjectURL(blob);
                downloadElement.href = href;
                downloadElement.download = fileData.fileName;
                document.body.appendChild(downloadElement);
                downloadElement.click();
                document.body.removeChild(downloadElement);
                window.URL.revokeObjectURL(href);
            }
        });
      },
    },
    watch:{
      itemId(){
        this.fileList = strToFileList(this.fList)
      },
      idx(){
        this.fileList = strToFileList(this.fList)
      }
    },
    created(){
      this.fileList = strToFileList(this.fList)
    }
 }
</script>
<style>

</style>