element上传图片组件使用方法|图片回显|格式转换base64

upload上传组件的使用方法

上传图片后自动上传（也可以手动上传），图片上传成功后由后端返回特定图片地址，在表单提交后将表单数据同图片地址一并返回即可完成图片上传功能。

组件HTML

<!-- 上传图片 -->
<div style="margin: 4px 0">图片上传（仅支持jpg、png格式）</div>
<el-upload
           class="upload"
           :class="{ hide: hideUpload }"
           action="#"
           list-type="picture-card"
           :auto-upload="true"
           :limit="3"
           :http-request="uploadFiles"
           :before-upload="beforeAvatarUpload"
           :on-change="onChange"
           :on-success="onSuccess"
           :on-remove="handleRemove"
           :file-list="fileList"
           accept="image/jpeg,image/gif,image/png,image/jpg"
           >
    <i slot="default" class="el-icon-plus"></i>
</el-upload>

需要声明部分变量

方法

1.将图片转换为base64的方法

//文件转base64
getBase64(file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file) //开始转
        reader.onload = function () {
            fileResult = reader.result
        } //转 失败
        reader.onerror = function (error) {
            reject(error)
        } //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
            resolve(fileResult)
        }
    })
},

2.数组根据内容删除对应元素

// 对应内容的索引
Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
// 删除对应索引的内容
Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

3.编辑图片并回显

已经上传过的图片如果需要进行编辑的话需要在进行上传之前先将已经上传过的图片已规定的格式存入图片列表中

放在切换至引用

this.picArr = [];
// 编辑上传过的图片
if (row.picList.length > 0) {
    for (let i = 0; i < row.picList.length; i++) {
        let param = { name: "", url: "", data: "" };
        param.name = row.picList[i].id;
        param.url = "/xxx/xxx/xxx?picUrl=" + row.picList[i].picurl;
        this.picArr.push(param);
    }
}

通过接受进来的数据将已经上传过的图片进行格式化，其中需要包含name、url 两种属性。HTML中需要写入:file-list="picArr"其中picArr就是自动添加进去的图片（格式与手动上传的图片不统一，提交的时候需要再次处理）

4.将文件以formdata的形式进行发送

//发送请求
let params = new FormData()
params.append('file', file.file)
params.append('size', file.file.size)

api.submit(params)
    .then((res) => {
    this.$message.success('上传图片成功')
    this.feedbackImg.push(res.data)
})
    .catch((err) => {
    console.error(err)
})

钩子

1.更改默认请求 http-request

需要将默认请求开启 :auto-upload="true"

// 自定义上传图片
uploadFiles(data) {
    console.log(data)
    this.formData.fileName = data.file.name //文件名
    this.formData.fileType = 'updateNoticeFile'
    this.getBase64(data.file).then((resBase64) => {
        // 操作。。。
        this.fileList.push({
            name: this.formData.fileName,
            url: resBase64,
        })
    })
},

2.图片上传前 before-upload

// 上传文件前
uploadBefore(file) {
    const isJPG =
          file.type === "image/png" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg";
    const isLt = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        this.$message.error("只能上传.jpg/.png/.jpeg格式图片!");
        return false;
    }
    if (!isLt) {
        this.$message.error("上传图片大小不能大于等于2MB!");
        return false;
    }
    return true;
},

3.发生改变之后 on-change

//发生改变后
onChange(file, fileList) {
    this.hideUpload = this.imgList.length >= this.limitCount;
    //操作...
},

4.文件上传成功后 on-success

//上传成功后
onSuccess(response, file, fileList, xhr) {
    this.picList = fileList;
},

利用第三个参数fileList保存当前文件列表的状态

5.删除成功后 on-remove

其中imgList为个人自定义添加的图片列表，实际可用fileList替代

// 删除成功后
onRemove(file, fileList) {
    // file = JSON.stringify(file)
    // 对应内容的索引
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    // 删除对应索引的
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    if (file && file.status === "success") {
        // 删除成功时候的方法
        this.imgList.remove(file);
        this.hideUpload = this.imgList.length >= this.limitCount;
    }
    this.picList = fileList;
},

利用第二个参数 fileList 保存文件列表的状体

样式

隐藏添加按钮

根据动态增加hide类使新增图片按钮动态隐藏

对upload上传文件标签添加动态的class当图片上传至指定个数后将添加按钮隐藏

:class="{ hide: hideUpload }"

// 隐藏新增的按钮
/deep/ .hide .el-upload--picture-card {
  display: none;
}

秒客网