vue-cli中使用base64上传文件

Posted 2021-09-26 码上暴富

vue-cli中使用base64上传文件

• vue-cli中使用base64上传文件

vue-cli中使用base64上传文件

在vue-cli中使用element
html

<el-upload
        class="upload-demo"
        action="/"
        :http-request="getFile"
        :limit="6"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        ref="upload"
        drag
        multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

javascript

methods: {
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                // console.log(typeof file.uid);
                return this.$confirm(`确定移除 ${file.name}？`).then(() => {
                    this.filePath.forEach((item, index) => {
                        if (item.slice(0, 13) === file.uid.toString()) {
                            this.filePath.splice(index, 1);
                        }
                    });
                    // console.log(this.filePath);
                    // console.log(this.filePath.toString());
                });
            },
            getBase64(file) {
                return new Promise(function (resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        imgResult = reader.result;
                    };
                    reader.onerror = function (error) {
                        reject(error);
                    };
                    reader.onloadend = function () {
                        resolve(imgResult);
                    };
                });
            },
            getFile(file, fileList) {
                console.log(file);
                /*let formData = new FormData();
                formData.append("file", file.file);
                formData.append("moduleKey", "cdsdkmanage");
                formData.append("filePath", file.file.uid);
                postUploadFile(
                    formData
                ).then(res => {
                    // console.log(res.data.fileSavePath);
                    // attachment: "1631085605673:/upload/module/cdsdkmanage/1631085605516/avatar.jpg"
                    //                nowDate   :   res.data.fileSavePath
                    let fp = file.file.uid + ":" + res.data.fileSavePath;
                    this.filePath.push(fp)
                    console.log(this.filePath);
                    if (res.status === 200) {
                        this.$message({
                            message: "成功",
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }).catch(err => {
                    console.log(err);
                })*/
                this.getBase64(file.file).then(res => {
                    this.filePath = res
                    console.log(this.filePath);
                });
            },
        }

结果