vue中vue-core-image-upload组件

安装

npm i vue-core-image-upload --save
<div class="upload clear">
 <span>营业执照</span>
   <vue-core-image-upload
     :class="['btn', 'btn-primary']"
     :crop="false"
     @imageuploaded="imageuploaded"
     input-of-file="file"
     :max-file-size="5242880"
     :url="uploadUrl">
     <img width="150" :src="formData.license" />
   </vue-core-image-upload>
 </div>
<script>
import VueCoreImageUpload  from 'vue-core-image-upload'
//上传图片
imageuploaded(res) {
   console.log(res)
   if(res.code == 0){
     this.formData.license = res.url;
   }
 },
</script>

//upload样式
.upload{
  width: 100%;
  border-top: 1px solid #e1e1e1;
  padding: 0.3rem 0;
  span{
    width: 3rem;
    line-height: 0.8rem;
    font-size: 0.42rem;
    float: left;
    padding-left: 0.3rem;
    box-sizing: border-box;
  }
  .btn-primary{
    background-color: #16c2c2;
    color: #fff;
    padding: 0.3rem;
    height: 4rem;
    width: 5rem;
    float: left;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.g-core-image-upload-form{
  width: 100%!important;
  height: 100%!important;
}

详细请点这里vue-core-image-upload源码地址
文档vue-core-image-upload文档配置

项目重新部署时,遇到的一个错误
错误

即:
These dependencies were not found:

* !!vue-style-loader!css-loader?{"sourceMap":false}!../../._vue-loader@13.7.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3483e884","scoped":true,"hasInlineConfig":false}!./style/crop.css in ./node_modules/._vue-core-image-upload@2.4.1@vue-core-image-upload/dist/crop.vue
* !!vue-style-loader!css-loader?{"sourceMap":false}!../../._vue-loader@13.7.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-80f84954","scoped":false,"hasInlineConfig":false}!./style/style.css in ./node_modules/._vue-core-image-upload@2.4.1@vue-core-image-upload/dist/vue-core-image-upload.vue

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":false}!../../._vue-loader@13.7.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3483e884","scoped":true,"hasInlineConfig":false}!./style/crop.css !!vue-style-loader!css-loader?{"sourceMap":false}!../../._vue-loader@13.7.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-80f84954","scoped":false,"hasInlineConfig":false}!./style/style

查找了很久,原因是以前vue-core-image-upload是2.3.10版本,最新的官方地址vue-core-image-upload版本是2.4.1会有问题。2.4.1版本就会出现上面问题。将版本固定到2.3.10即可
执行如下命令:

cnpm i --save vue-core-image-upload@2.3.10
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值