iview Upload组件+egg实现图片预览上传回显

最新推荐文章于 2024-05-30 16:19:20 发布

原创最新推荐文章于 2024-05-30 16:19:20 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #iview #Upload #node #egg

nodejs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于Vue.js的图片上传与预览组件的实现细节，包括如何处理文件格式错误、大小限制，以及如何使用FileReader API读取图片并显示大图。组件还包含了拖拽上传功能和自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div v-if="uploadImg.url" class="upload-img">
  <img :src="uploadImg.url">
  <div class="upload-img-cover">
    <Icon type="ios-eye-outline" @click.native="showBigImg = true"></Icon>
    <Icon type="ios-trash-outline" @click.native="uploadImg = {}"></Icon>
  </div>
</div>
<Upload
  ref="upload"
  :show-upload-list="false"
  :before-upload="handleUpload"
  type="drag"
  action=""
  style="display: inline-block;width:58px;">
  <div style="width: 58px;height:58px;line-height: 58px;">
    <Icon type="ios-camera" size="20"></Icon>
  </div>
</Upload>
<Modal title="查看大图" v-model="showBigImg">
  <img :src="uploadImg.url" style="width: 100%">
</Modal>

uploadImg: {},
showBigImg: false,

handleFormatError(file) {
  this.$Notice.warning({
    title: '文件格式不正确',
    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg、jpeg 或 png 的图片文件。',
  });
},
handleMaxSize(file) {
  this.$Notice.warning({
    title: '超出文件大小限制',
    desc: '文件 ' + file.name + ' 太大，不能超过 2M。',
  });
},
handleUpload(file) {
  if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
    this.handleFormatError(file);
  } else if (file.size > 2 * 1024 * 1024) {
    this.handleMaxSize(file);
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      this.uploadImg = {
        url: reader.result,
        file,
      };
    };
  }
  return false;
},

const formData = new FormData();
for (const key in this.modalParams) {
  formData.append(key, this.modalParams[key]);
}
if (this.uploadImg.file) {
  formData.append('logo', this.uploadImg.file);
}
this.$axios._api_dashboard_service.post('', formData).then(res => {});

this.$axios._api_dashboard_service.get('', { params: {} }).then(res => {
  const result = res.data;
  if (result.status === 'SUCCEED') {
    const data = result.data;
    let url = '';
    if (data.url) {
      url = 'data:image/png;base64,' + data.url;
    }
    this.uploadImg = {
      url,
    };
  }
});

.upload-img{
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.upload-img img{
  width: 100%;
  height: 100%;
}
.upload-img-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.upload-img:hover .upload-img-cover{
  display: block;
}
.upload-img-cover i{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

保存图片
requireFile: false 表明文件不是必传，此配置是在egg-multipart 2.1.0版本加入的，低版本会报错，须升级egg

// await-stream-ready, 文件读写流 ready 库，主要是方便的使用 await 进行文件上传, 否则可能出现数据丢失的情况
const awaitWriteStream = require('await-stream-ready').write;

const stream = await ctx.getFileStream({ requireFile: false });
ctx.validate(rule, stream.fields);
const body = stream.fields;
if (stream.filename) {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir);
  }
  const filePath = path.join(dir, filename);
  const writeStream = fs.createWriteStream(filePath);
  try {
    await awaitStreamReady(stream.pipe(writeStream));
  } catch (err) {
    await sendToWormhole(stream);
    throw err;
  }
} else {
  await sendToWormhole(stream);
}

获取图片的base64编码，用于回显

const filePath = path.join(dir, filename);
let url = '';
if (fs.existsSync(filePath)) {
  const data = fs.readFileSync(filePath);
  url = data.toString('base64');
}

删除图片

const filePath = path.join(dir, filename);
if (fs.existsSync(filePath)) {
  fs.unlinkSync(filePath);
}