Codeup企业级代码管理平台,我们应该如何使用Codeup

大学生学剪辑蒙太奇技巧怎么用?

  返回  

vue + element组件 el-upload图片上传

2021/8/20 14:52:26 浏览:

效果图:

 

html片段:

action是上传图片的地址,用 “#” 占位        


          <el-upload
            class="avatar-uploader"
            action="#"
            name="qrCode"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUploadShare"
          >
            <img
              v-if="imgUrl"
              :src="imgUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

js片段:

    // 图片上传
    beforeAvatarUploadShare(file) {
      // 上传接口
      let formData = new FormData();
      formData.append("type", "file");
      formData.append("file", file);
      // 这里发请求,把formData作为参数传给后端,后端会返回一个图片地址。
      this.$api.uploadImg(formData).then((res) => {
        const data = JSON.parse(res);
        if (data.code == 200) {
          this.imgUrl = data.data.data;
        } else {
          this.$message.error(data.data);
        }
      });
    },

    // 上传成功
    handleAvatarSuccess(res, file) {
      this.imgUrl = URL.createObjectURL(file.raw);
    },

如果需要限制文件类型和大小,可在 beforeAvatarUploadShare 中加入下面代码


      // 格式判断
      const isIMG =
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      if (!isIMG) {
        this.$message({
          message: "请上传 jpg, jpeg, png 格式的图片",
          type: "warning",
        });
        return false;
      }
      // 大小判断
      if (file.size / 1024 > 400) {
        this.$message({
          message: "请上传400kb以下的图片",
          type: "warning",
        });
        return false;
      }

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号