【开发实践】用Element实现图片的上传和回显vue

图片显示

在首页list列表展示效果

<el-table-column label="封面图片" align="center" width="150" prop="imageAddress">
  <template slot-scope="scope">
    <el-image
      v-if="scope.row.imageAddress && scope.row.imageAddress!=='[]'"
      class="item_image"
      fit="cover"
      :src="JSON.parse(scope.row.imageAddress)[0]"
      :preview-src-list="JSON.parse(scope.row.imageAddress)"
    >
      <div slot="placeholder" class="image_slot">
        加载中<span class="dot">...</span>
      </div>
      <div slot="error" class="image_slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <span v-else>-</span>
  </template>
</el-table-column>

css样式

<style rel="stylesheet/scss" lang="scss">
  // 列表图片
  .item_image{
    width: 110px;
    height: 80px;
    border-radius: 5px;

    // 插槽
    .image_slot{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
      font-size: 20px;
    }
  }
</style>

​

图片上传

前端将图片保存在 数组 中，后端数据库保存为数组的 json字符串

---

图片组件

<el-form-item label="封面上传" prop="imageAddress">
  <el-upload
    :class="{ hide: isHideImageUpload }"
    list-type="picture-card"
    :action="uploadUrl"
    :limit="limitImageCount"
    :before-upload="handleUploadBefore"
    :on-change="handleImageChange"
    :on-success="handleUploadSuccess"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleUploadRemove"
    :file-list="form.imageList">
    <i class="el-icon-plus" />
  </el-upload>
  <el-dialog :visible.sync="openImagePreview" append-to-body>
    <el-row type="flex" justify="center">
      <el-image
        style="width: 550px; height: 400px;"
        fit="cover"
        :src="imagePreviewUrl">
        <div slot="error" class="image_slot">
          <i class="el-icon-picture-outline" />
        </div>
      </el-image>
    </el-row>
  </el-dialog>
</el-form-item>

<style type="text/css">
  .hide .el-upload--picture-card {
    display: none;
  }
  .el-upload-list__item {
    transition: none !important;
  }
</style>

上传回调

data() {
	return {
    // 图片上传接口
    uploadUrl: process.env.VUE_APP_BASE_API + "/api/file/upload",
    // 是否隐藏上传按钮
    isHideImageUpload: false,
    // 预览的图片地址
    imagePreviewUrl: '',
    // 图片预览开关
    openImagePreview: false,
    // 图片数量限制
    limitImageCount: 1,
  }
}
watch: {
  // 新增编辑页监听
  open(val) {
    // 关闭时立即重置图片数组和limit标志 否则会有动画异常
    if (val === false) {
      this.form.imageList = [];
      this.isHideImageUpload = false;
    }
  }
},

methods: {
	//上传文件之前 校验图片事件
	handleUploadBefore(file) {
	  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
	  const isLt10M = file.size / 1024 / 1024 < 10;

	  if (!isJPG) {
	    this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
	  }
	  if (!isLt10M) {
	    this.$message.error('上传图片大小不能超过 10MB!');
	  }
	  return isJPG && isLt10M;
	},
	// 文件状态改变事件 添加文件、上传成功和上传失败时都会被调用
	handleImageChange(file, fileList) {
	  this.isHideImageUpload = fileList.length >= this.limitImageCount;
	  console.log(fileList);
	},
	// 点击图片(文件列表中已上传的文件)事件
	handlePictureCardPreview(file) {
	  console.log(file);
	  this.imagePreviewUrl = file.url;
	  this.openImagePreview = true;
	},
	// 图片上传成功事件
	handleUploadSuccess(response, file, fileList) {
	  file.url = response.data; // 接口返回图片地址
	  this.form.imageList = fileList;
	},
	// 图片移除事件
	handleUploadRemove(file, fileList) {
	  this.form.imageList = fileList;
	  this.isHideImageUpload = fileList.length >= this.limitImageCount;
	},
  // 表单重置
  reset() {
    this.form = {
      ...
      imageList: []
    };
    this.resetForm("form");
  },
}

这里看下回调函数的返回值 file, fileList

{
  status: "success",
  uid: 1625277773293,
  url: "http://8.136.108.224:8081/20bbf94a82284a8b9480c6cd2c72af26.jpg"
}

[
	{
    name: "所以爱会消失正方形.png",
    percentage: 100,
    raw: File Object,
    response: {
      code: 200,
    	data: "http://8.136.108.224:8081/eee02cda35234769b1733d5b1bb06281.png",
    	msg: "上传成功",
    }
    size: 335749,
    status: "success",
    uid: 1625278108994,
    url: "http://8.136.108.224:8081/eee02cda35234769b1733d5b1bb06281.png"
	},
]

---

图片回显

// imageList字段类型会被清除 this.form = response.data;
this.form.imageList = []; 

// 图片 json字符串转数组
if (this.form.imageAddress && this.form.imageAddress !== '[]'){
  let imageArray = JSON.parse(this.form.imageAddress);
  imageArray.forEach(image =>{
    this.form.imageList.push({
      'url': image
    })
  });
  // 图片数量限制
  this.isHideImageUpload = this.form.imageList.length >= this.limitImageCount;
}

---

表单提交

let imageUrlArray = [];
// 图片有上传
if (this.form.imageList.length > 0){
  this.form.imageList.forEach(image => {
    imageUrlArray.push(image.url);
  });
  this.form.imageAddress = JSON.stringify(imageUrlArray);
}