element upload文件自定义上传

<!--文件上传组件-->
<el-dialog title="上传" :visible.sync="dialogFormVisible2" :before-close="closeFileUploadDialog">
      <el-form :model="uploadForm">
        <el-form-item label="">
          <el-upload  ref="uploadForm" action=""  :multiple="false" :file-list="fileList" :before-upload="beforeUpload"
            :on-change="handleFileChange" :on-remove="handleRemove"
            :http-request="uploadFile" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFileUploadDialog">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
</el-dialog>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

//上传文件，获取文件流
handleFileChange(file) {
   console.log(file);
   this.file = file.raw
},
handleRemove(file, fileList) {
    this.file = '';
},
beforeUpload(file) {
 
},
submitUpload() {
    if (this.file != '') {
        this.$refs.uploadForm.submit();
    } else {
        this.$message({
            message: '请先选择文件!',
            type: 'warning',
            duration: '2000'
        });
    }
},
deleteFile(savedPath) {
    this.$axios({
        url: "/api/test/deleteFile",
        method: "post",
        data: {
            "savedPath": savedPath
        }
    }).then((response) = >{
        console.log('res delete=>', response);
        this.editForm.qualificationScan = '';
        this.styleObj1 = {
            display: 'none'
        };
        this.styleObj2 = {
            display: 'inline'
        };
        this.file = '';
        this.fileList = [];
    }).
    catch(response = >{
        console.log(response)
    });
},
downloadFile(savedPath) {
    alert(savedPath);
    this.$axios({
        url: "/api/test/downloadFile",
        method: "get",
        params: {
            "savedPath": savedPath
        },
        //responseType: 'blob'
        responseType: "arraybuffer"
    }).then((response) = >{
        console.log('res download=>', response);
        const _res = response.data;
        console.log('res download=>', _res);
        let blob = new Blob([_res], {
            type: "application/x-png;charset=UTF-8"
        });
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = "test.png"; //下载后文件名A
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象*/
        /*var src='data:image/jpg;base64,'+ btoa(new Uint8Array(_res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
            this.srcImg = src; //图片回显
            var link = document.createElement('a');
            link.href = src;
            link.download = "qrCode.png";
            link.click();
            //document.body.removeChild(link); //下载完成移除元素
           // window.URL.revokeObjectURL(link);//释放掉blob对象*/
    }).
    catch(response = >{
        console.log(response)
    })
},
// 自定义上传
uploadFile() {
    let index = this.file.name.lastIndexOf(".");
    let suffix = this.file.name.substr(index + 1);
    // 创建表单对象
    let formData = new FormData();
    // 后端接受参数 ，可以接受多个参数
        formData.append("file", this.file);
        formData.append("uploadFileName","git");
        formData.append("uploadFileContentType", suffix);
        this.$axios({
        url: "/api/test/uploadFile",
        method: "post",
        data: formData,
    }).then((response) = >{
        console.log('res=>', response);
        var res = response.data;
        if (res.succ == "ok") {
            this.editForm.qualificationScan = res.msg;
            this.dialogFormVisible2 = false;
            this.styleObj1 = {
                display: 'inline'
            };
            this.styleObj2 = {
                display: 'none'
            };
            this.$message({
                message: this.$t('common.uploadSucess'),
                type: 'success',
                duration: '2000'
            });
        } else {
            this.$message({
                message: this.$t('common.uploadFail'),
                type: 'error',
                duration: '2000'
            });
        }
    })
},
closeFileUploadDialog() {
    this.dialogFormVisible2 = false;
    this.file = '';
    this.fileList = [];
},
showFileUpload(type) {
    this.dialogFormVisible2 = true;
    this.file = '';
}