1. 程式人生 > >vue中vue-core-image-upload元件

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.3
rem; height: 4rem; width: 5rem; float: left; img{ width: 100%; height: 100%; } } } .g-core-image-upload-form{ width: 100%!important; height: 100%!important; }

專案重新部署時,遇到的一個錯誤
錯誤

即:
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