自定义上传图片

使用 http-request

<el-upload
    class="avatar-uploader"
    action="fakeaction"
    :show-file-list="false"
    :http-request="uploadImg"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
>
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

定义文件的上传类型

// 在data中写了个数据，存放上传图片的类型
imgType: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']

// 上传文件判断
beforeAvatarUpload(file) {
    // 调用testFileType方法，把定义的imgType数组和我们上传的图片类型file.type一起传进去
    const isTYPE = this.testFileType(this.imgType, file.type);
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (isTYPE) {
        this.$message.error('上传的图片只能是 JPG、JPEG、PNG、GIF 格式!');
    }
    if (!isLt2M) {
        this.$message.error('上传的图片大小不能超过 2MB!');
    }
    return !isTYPE && isLt2M;
},
// 判断文件类型是否在数组中 返回布尔值
testFileType(arr, fileType) {
    arr.filter((el, index) => {
        return fileType === el[index];
    });
},

在使用FileReader转换图片格式时，得到的是个Promise的数据（如下图），需要用.then出来

image.png

// 上传文件
uploadImg(params) {
    console.log(params);
    var imgUrl = '';
    // Promise的数据需要用.then得到
    this.getBase64(params.file).then(res => {
        console.log(res); // res就是base64格式的图片数据
        imgUrl = res;
    });
    // 在此axios请求
},
// 转换格式
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);
        };
    });
},