0


【Element-plus】vue选项式中使用el-upload上传图片并回显流程

html

    action:请求url,从后端那里获取

    on-success:文件上传成功时的钩子,获取文件上传成功后返回的图片url

    headers:请求头,可以配置权限
          <el-upload
            class="uploader"
            :action=ossUrl
            :on-success="handleImgSuccess"
            :headers="{
              Authorization:
                token
            }"
          >
            <img
              v-if="eventInfo.imageUrl"
              :src="eventInfo.imageUrl"
              class="uploaderImg"
            />
            <div
              v-else
              class="uploaderIcon"
            >
              <el-icon>
                <Plus />
              </el-icon>
              点击上传图片
            </div>
          </el-upload>

JS

 mounted() {
    /**
     * 上传图片:获取token,获取ossUrl
     */
    const loginStore = useLoginStore();
    this.token = loginStore.token
    this.ossUrl = base.baseUrl + base.ossUrl
  },

 methods: {
    /** 
     * 图片上传成功
     */
    handleImgSuccess(response) {
      console.log(response)
      if (response.code === 200) {
        // 获取图片url
        this.eventInfo.imageUrl = response.data.url;
      }
    }
    
  }

CSS


<style scoped>

.eventInfo .right .uploader {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
}

/* 在最下面的style标签中 */
/* .eventInfo .right .uploader .el-upload {
  background-color: pink;
  width: 100%;
  height: 100%;
  display: block;
} */

.right .uploader .uploaderImg {
  width: 100%;
  height: 100%;
}

.right .uploader .uploaderIcon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dotted red;
  border-radius: 20px;
  color: rgba(255, 0, 0, 0.76)
}

</style>

<style>
.eventInfo .right .uploader .el-upload {
  width: 100%;
  height: 100%;
  display: block;
}
</style>

实现效果


本文转载自: https://blog.csdn.net/m0_63143512/article/details/138266928
版权归原作者 Jason 六只熊 所有, 如有侵权,请联系我们删除。

“【Element-plus】vue选项式中使用el-upload上传图片并回显流程”的评论:

还没有评论