标签:尺寸 baseurl this join oda nis hover img 网络
以下是组件代码,重点部分在watch中,
<!-- 传参 :mutileUploadData={ defaultList:Array,初始图片 format:Array,[‘jpg‘,‘jpeg‘,‘png‘], actionUrl:// 必填_接口地址 maxSize:‘1024‘//最大尺寸 maxNum:2//上传的个数 } 事件 @get-upload-Image 返回所有上传图片的url地址list --> <template> <div> <div class="demo-upload-list" v-for="item in uploadList" :key="item.url"> <template v-if="item.status === ‘finished‘"> <img :src="item.url" /> <div class="demo-upload-list-cover"> <Icon type="ios-eye-outline" @click.native="handleView(item.url)" ></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove(item)" ></Icon> </div> </template> <template v-else> <Progress v-if="item.showProgress" :percent="item.percentage" hide-info ></Progress> </template> </div> <!-- :default-file-list="defaultImageList" --> <Upload class="mutile-upload" ref="upload" :show-upload-list="false" :default-file-list="mutileUploadData.defaultList" :on-success="handleSuccess" :on-error="uploadError" :format="mutileUploadData.format" :max-size="mutileUploadData.maxSize" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :data="mutileUploadData.actionParams" multiple type="drag" :action="action" style="display: inline-block;width:58px;" > <div class="cameraDefault"> <Icon type="ios-camera" size="20"></Icon> </div> </Upload> <Modal title="View Image" v-model="visible" footer-hide> <img :src="imgName" v-if="visible" style="width: 100%" /> </Modal> </div> </template> <script> export default { props: { mutileUploadData: Object }, data() { return { imgName: "", visible: false, uploadList: [], baseUrl: process.env.VUE_APP_BASE_API, }; }, computed: { action: function() { let url = this.baseUrl + this.mutileUploadData.actionUrl; return url; }, fileSize: function() { return parseInt(this.mutileUploadData.maxSize / 1024) + "M"; }, fileType: function() { return this.mutileUploadData.format.join(","); }, }, methods: { handleView(name) { this.imgName = name; this.visible = true; }, handleRemove(file) { this.$Modal.confirm({ title: "请注意", content: "您确定要删除吗?", onOk: () => { const fileList = this.$refs.upload.fileList; this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); }, }); }, handleSuccess(res, file) {if (res && res.success) { file.url = res.data.Path; file.name = res.data.FileName;
this.uploadList.push({
} else { this.$Message.info(res.message); } }, uploadError() { this.$Modal.error({ title: "操作失败", content: "网络请求失败", onOk() {}, }); }, handleFormatError(file) { this.$Modal.warning({ title: "格式错误", content: "文件 " + file.name + " 格式不正确,只支持" + this.fileType + "格式的文件。", onOk() { this.$nextTick(() => {}); }, }); }, handleMaxSize(file) { this.$Modal.warning({ title: "文件过大", content: "文件 " + file.name + " 太大,不能超过" + this.fileSize + "。", onOk() {}, }); }, handleBeforeUpload() { const check = this.uploadList.length < this.mutileUploadData.maxNum; if (!check) { this.$Notice.warning({ title: "最多上传" + this.mutileUploadData.maxNum + "张", }); } return check; }, }, mounted() { this.uploadList = this.$refs.upload.fileList; }, watch: { uploadList: { handler(val) { let tempList = []; val.forEach((element) => { tempList.push(element.url); }); this.$emit("get-upload-Image", tempList); }, deep: true, }, "mutileUploadData.defaultList": { handler(val) { this.uploadList.splice(0, this.uploadList.length); //清空数组 val.forEach((element) => { this.uploadList.push({ name: element.name, url: element.url, showProgress: false, status: "finished", }); }); }, deep: true, } }, }; </script> <style> .demo-upload-list { display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); margin-right: 4px; } .demo-upload-list img { width: 100%; height: 100%; } .demo-upload-list-cover { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); } .demo-upload-list:hover .demo-upload-list-cover { display: block; } .demo-upload-list-cover i { color: #fff; font-size: 20px; cursor: pointer; margin: 0 2px; } .mutile-upload { display: inline-block !important; } .cameraDefault { width: 58px; height: 58px; line-height: 58px; } </style>
实现效果
使用iview Upload进行多文件上传,编辑页初始已上传的图片失败的问题
标签:尺寸 baseurl this join oda nis hover img 网络
原文地址:https://www.cnblogs.com/ouyangxiaoyao/p/12721968.html