vue 中单图上传笔记

2021-04-15 12:04:19 阅读：177 来源： 互联网

标签：单图 text upload height vue avatar uploader 178px 上传

第一步： cnpm install vue-core-image-upload --save

第二步：import VueCoreImageUpload from 'vue-core-image-upload'

第三步：components: {VueCoreImageUpload}

第四步：<vue-core-image-upload

     class="avatar-uploader"
    :crop="false"
    text="请选择图片"
    compress="25"
   inputOfFile="file"
   @imageuploaded="imageuploaded"
   @imageuploading="imageuploading"
   :max-file-size="10485760"
   :credentials="false"
   url="https://jsonplaceholder.typicode.com/posts/">
</vue-core-image-upload>
<div class="center">
  <img :src="form.bannerImg" class="avatar"/>
</div>

imageuploading() {
  this.show_load = true
},
imageuploaded(res) {
  this.text = '已上传'
  // res 是后台传过来的图片地址
  this.form.bannerImg = res  //用于赋值
  this.show_load = false
},

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: aquamarine;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid black;
  }

  .avatar {
    width: 300px;
    height: 178px;
    display: block;
  }

  .text {
    text-align: left;
  }

  ::v-deep .w-e-text-container {
    height: 420px !important;
  }
</style>

<el-table-column prop="bannerImg" label="缩略图">
  <template slot-scope="scope">
    <img :src="scope.row.bannerImg" alt="" style="width: 120px;height: 60px">
  </template>
</el-table-column>

标签：单图,text,upload,height,vue,avatar,uploader,178px,上传
来源： https://www.cnblogs.com/hxzxy/p/14661785.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 中 单图上传笔记

vue 中单图上传笔记