vue-image-crop-upload
vue-image-crop-upload copied to clipboard
支持一个页面多个图片上传吗?增加一个index参数,上传成功之后的图片链接需要加到一个数组里面
需要一个页面有多个上传图片,上传的图片需要写到一个数组中,因此需要传入一个index参数,代码如下:
<el-form-item label="上传照片" :prop="photo.photoUrl" hide-required-asterisk="false"> <my-upload ref="uploader" field="file" enctype="multipart/form-data" :langExt="zh" @crop-success="cropSuccess(index)" @crop-upload-success="cropUploadSuccess(index)" @crop-upload-fail="cropUploadFail(index)" v-model="show" :withCredentials="withCredentials" :no-circle="true" :width="320" :height="180" :url="uploadImgUrl" :params="params" :headers="headers" img-format="png" ></my-upload> <el-button size="small" type="primary" @click="toggleShow">点击上传</el-button> <div class>只能上传jpeg/jpg/png/gif格式的图片,且不超过5M</div> <img class="photoUrl" :src="photo.photoUrl"> </el-form-item>
js:
toggleShow() { this.show = !this.show; }, cropSuccess(index, photoUrl, field) { console.log('-------- cropSuccess --------', photoUrl); this.photoes[index].photoUrl = photoUrl; }, cropUploadSuccess(index, jsonData, field) { console.log('-------- upload success --------', jsonData); // console.log('field: ' + field); if (jsonData.retCode === "00000") { this.photoes[index].photoUrl = jsonData.vo.uploadUri if (this.$refs.uploader) { this.$refs.uploader.off() } } }, cropUploadFail(index, status, field) { console.log('-------- upload fail --------'); console.log(status); },