Element图片上传

哦豁*

已于 2022-02-15 16:22:17 修改

阅读量479

点赞数

文章标签： javascript 前端 css

于 2022-02-15 13:36:23 首次发布

本文链接：https://blog.csdn.net/m0_62351236/article/details/122942641

版权

前端界面显示的图片为本地路径的图片；将数据传递给后端后，后端进行图片路径存储操作
上传图片格局

<el-col :span="12">
    <span style="line-height: 40px">车辆照片上传</span>
    <template>
        <el-alert
                title="温馨提示：点击即可修改图片，只允许上传.jpg或.png格式   **非必选**"
                type="warning"
                :closable="false">
        </el-alert>
    </template>
    <!--不使用action 符号#   用http-request实现自定义上传  :http-request="httpRequest"  :on-change="handleChange"-->
    <el-upload
            class="avatar-uploader"
            action="lei"
            :on-change="handleChange"
            :show-file-list="false"
            :http-request="httpRequest"><!--覆盖默认上传-->
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <el-form-item label="车辆照片路径" prop="carImg" hidden>
        <el-input v-model="car.carImg" clearable></el-input>
    </el-form-item>
</el-col>


<style lang="less" scoped>
    .avatar-uploader {
        margin-top: 20px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: flex;
    }
</style>

data中需定义的数据

imageUrl: '',
tempUrl: '',

涉及方法

//将上传图片的原路径赋值给临时路径
handleChange(file, fileList) {
    this.tempUrl = URL.createObjectURL(file.raw);
},
//实现图片上传功能
httpRequest(item) {
     //验证图片格式大小信息
     const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png';
     const isLt2M = item.file.size / 1024 / 1024 < 2;
     if (!isJPG) {
         this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
     }
     if (!isLt2M) {
         this.$message.error('上传图片大小不能超过 2MB!');
     }
     //图片格式大小信息没问题 执行上传图片的方法
     if (isJPG && isLt2M == true) {
         // post上传图片
         let App = this;
         //定义FormData对象 存储文件
         let mf = new FormData();
         //将图片文件放入mf
         mf.append('file', item.file);
         App.$Api.fileUpload(mf, function (result) {
             if (result.result == "true") {
                 App.$notify.success({
                     title: '温馨提示：',
                     message: result.message,
                 });
                 //将临时文件路径赋值给显示图片路径（前端显示的图片）
                 App.imageUrl = App.tempUrl;
                 //将后台传来的数据库图片路径赋值给car对象的图片路径
                 App.car.carImg = result.imgUrl;
             } else {
                 App.$notify.error({
                     title: '温馨提示：',
                     message: result.message,
                 });
             }
         })
     }
 }