vue上传图片并预览

最新推荐文章于 2025-08-26 15:23:59 发布

南半球与北海道#

最新推荐文章于 2025-08-26 15:23:59 发布

阅读量362

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/tt1234561009/article/details/149750267

一、上传图片

1）el-upload

这里只支持上传一张图片，before-upload上传文件之前的钩子用于校验文件格式，http-request可自定义上传方法

<el-form-item label="品牌logo" prop="picPath" class="form-item-spe">
 <el-upload
   class="upload-demo"
   action="#"
   :show-file-list="false"
   :before-upload="beforeUpload"
   :http-request="handleUpload">
   <img v-if="form.picPath" :src="form.picPath" class="upload-img" />
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
</el-form-item>

2）样式部分

.upload-demo .el-upload {
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.upload-demo .upload-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

3）校验及上传方法

注：beforeImgUpload是封装的统一校验函数

beforeUpload(file) {
  let flag = beforeImgUpload(file);
  return flag;
},
handleUpload(param) {
   let formData = new FormData();
   formData.append("file", param.file);
   commonUpload(formData).then((res) => {
   if (res.code === 200) {
      this.$set(this.form, "picPath", process.env.VUE_APP_BASE_API + res.fileName);
   }
 });
},

// 上传图片前的校验
export function beforeImgUpload(file) {
  let fileType = [".png", ".jpg", ".jpeg"];
  const fileName = file.name;
  const hz = fileName.substring(fileName.lastIndexOf("."));
  const isLt2M = file.size / 1024 / 1024 < 10;
  if (!isLt2M) {
    Message({
      message: "上传图片大小不能超过 2Mb!",
      type: "warning"
    });
    return false;
  }
  if (fileType.indexOf(hz) < 0) {
    Message({
      message: "支持png、jpg、jpeg格式的文件！",
      type: "warning"
    });
    return false;
  }
  return true;
}

二、预览

<div class="image-box">
   <el-image
   :src="form.picPath"
   fit="cover"
   :zoom-rate="1.2"
   :max-scale="7"
   :min-scale="0.2"
   :preview-src-list="[form.picPath]" />
</div>

.image-box {
  & > .el-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 8px;
    border: 1px solid #ebeef5;
  }
}

三、效果图

这世界很喧嚣，做你自己就好