vue + element元件 el-upload圖檔上傳

效果圖：

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);
      // 這裡發請求，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;
      }
           

OK