Vue文件上传功能

div部分如下

以下以上传excel文件为例

<div>
    <el-upload
        class="handle-del mr10"
        ref="upload"
        action=""
        accept=".xls,.xlsx"
        :limit="limitUpload"
        :on-exceed="handleExceed"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-change="onUploadChangeFile"
        :file-list="fileListFile"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 30px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传1个图片压缩包和1个文件压缩包文件，且均不超过50M</div>
    </el-upload>
</div>```

js部分如下

  export default {
        name: 'dashboard',
        data() {
            return {
                userId: localStorage.getItem('ms_username'),
                limitUpload: 1,
                fileListFile: [],
                RawDataInfo:{
                    filetext:'',
                    creuser:''
                }
}
        },


  methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },

            //超出最大上传文件数量时的处理方法
            handleExceed() {
                this.$message({
                    type: "warning",
                    message: "超出最大上传文件数量的限制！"
                });
                return;
            },
            onUploadChangeFile(file){

                // const isZIP = file.raw.type==='application/zip'||file.raw.type==='APPlication/x-zip-compressed'||file.raw.type==='application/octet-stream'||file.raw.type==='application/x-zip-compressed';
                const isEXCEL = file.raw.type==='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||file.raw.type==='application/vnd.ms-excel';
                const isLt1M = file.size/1024/1024<50;
                if (!isLt1M){
                    this.$message.error('文件上传大小不能超过50M');
                    return  ;
                }
                if(!isEXCEL){
                    this.$message.error('文件不是需求类型');
                    return  ;
                }
                var reader = new FileReader();
                if(isEXCEL){
                    reader.readAsDataURL(file.raw);
                    reader.onload = function(e){
                        self.txt=e.target.result ;
                    }
                }else{
                    alert('请上传excel格式的文件！');
                }
            },
            //上传到服务器
            submitUpload() {
                const _self = this;
                if ((self.txt === '') || (self.txt === undefined)) {
                    _self.$message.error('上传文件不可为空！');
                    return;
                }
                _self.RawDataInfo = {

                    'filetext': self.txt,
                    'creuser': _self.userId,
                };

                //此时得到了需要的数据，插入数据库。
                this.$http({
                    method: 'post',
                    url: '/RecyclingIssueInfo/InsertAccountLog',
                    data: _self.RawDataInfo,
                })
                    .then((response) => {
                        if (response.data["header"]["code"] == 0) {
                            _self.$message.success('数据上传成功！！！！');
                            _self.fileListFile = [];
                            _self.loading = false;

                        } else {
                            _self.$message.error(response.data["header"]["message"]);
                            _self.loading = false;

                        }
                    })
                    .catch((error) => {
                        _self.$message.error(error.toString());
                        _self.loading = false;
                    });
            }
          }
    }

后台直接insert把传入的字段加进数据库就完成啦

如果有获取不到文件流值得时候可以尝试新建方法将值重新传一遍