vue-element-admin 初体验（二）图片上传以及标准时间转成时间戳

最新推荐文章于 2024-02-16 00:26:01 发布

原创

最新推荐文章于 2024-02-16 00:26:01 发布 · 838 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了在vue-element-admin中如何进行图片上传，并详细讲解了如何将标准时间转换为时间戳，以适应后台存储需求。在图片上传部分，虽然EleUI提供了组件，但实际使用时仍需进行一些定制，例如添加公共域名。时间转换则利用EleUI的时间选择器，通过change事件获取日期并转换为时间戳。

一、图片上传

其实 EleUI 有现成的上传图片 / 头像，自己用还是要改一下。

<el-upload class="avatar-uploader" action="uploadData" :http-request="UploadImage"
 :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="addimg" style="width: 100px;height: 100px;">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type == 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.er