Element-ui上传图片按顺序展示
背景
不知道你上传图片的时候有没有过这样的情况，批量上传多张图片，可能因为图片大小或者网络问题，导致图片返回的顺序和上传时的顺序不一样。因为我们公司是做电商的，即使我们的支持拖动排序，运营还是希望图片能够严格的按照他们上传的顺序展示。
解决问题
在上传组件的on-success的方法中，有3个参数 response, file, fileList 其中fileList就是之前上传成功图片的集合，且upload组件提供了clearFiles方法，用来清空fileList，每次上传成功，我们调用clearFiles方法就行了
上代码
<template> <!-- 上传单张图片 --> <div v-if="!multiple" class="image-item"> <div class="image-wrap" v-if="imgUrl"> <img :src="imgUrl" :style="imgStyle" /> <div class="icon-wrap" @click.stop="removeFile"> <i class="el-icon-delete"></i> </div> </div> <el-upload v-else ref="imageUpload" action="//up.qbox.me" :before-upload="beforeUpload" :on-success="handleSuccess" class="image-uploader" :on-error="onError" :data="form" :show-file-list="false" :disabled="loading" accept="image/*"> <i :class="loading ? 'el-icon-loading' : 'el-icon-plus'" :style="imgStyle"></i> </el-upload> </div> <!-- 上传多张图片 --> <div class="image-list" v-else> <draggable v-model="showImgList" :options="{group:'image'}" @change="dragChange"> <div v-for="(image, index) in showImgList" :key="index" class="image-wrap"> <img :src="imgUrl" :style="imgStyle" /> <div class="icon-wrap" @click.stop="removeFile(index)"> <i class="el-icon-delete"></i> </div> </div> <el-upload ref="imageListUpload" action="//up.qbox.me" :before-upload="beforeUpload" :on-success="handleSuccess" class="image-uploader" :on-error="onError" :data="form" multiple :disabled="loading" :show-file-list="false" accept="image/*"> <i :class="loading ? 'el-icon-loading' : 'el-icon-plus'" :style="imgStyle"></i> </el-upload> </draggable> </div> </template> <script type="text/babel"> /** * 上传图片或文件 */ import md5 from 'blueimp-md5' import draggable from 'vuedraggable' export default { props: { // 接收和返回的数据 data: { type: [Array, String, Object], default: () => { return '' } }, // 上传多个文件时，文件限制的个数 limit: { type: Number, default: () => { return 100 } }, // 一次上传多个 multiple: { type: Boolean, default: false, }, //图片展示的宽度 imgWidth: { type: Number, default: 150, }, imgHeight: { type: Number, default: 150, }, //期望上传图片的宽度 rule: [ Object, Function ] }, data() { return { imgUrl: '', imageCdn: '', //图片的cdn form: { token: '', //七牛上传的token }, showImgList: [], fileList: [], clipboard: false, isDrag: false, handleSuccess: null, loading: false, } }, components: { draggable }, watch: { data: { handler(value) { if (!this.multiple) { this.imgUrl = value } else if (this.multiple) { this.showImgList = value } }, immediate: true } }, computed: { imgStyle() { return { width: this.imgWidth + 'px', height: this.imgHeight + 'px', lineHeight: this.imgHeight + 'px', } } }, mounted() { //防抖 this.handleSuccess = _.debounce(this.uploadSuccess, 500) }, methods: { beforeUpload(file) { if (file.type.split('/')[0] === 'image') { let tempSize = file.size / 5242880 if (tempSize > 1) { this.$message.error('图片尺寸不得大于5M！') return false } } this.loading = true let tempNames = file.name.split('.') let fileType = tempNames[tempNames.length - 1] let curr = (+new Date()).toString() let random = Math.random() * 10000 let md5Str = md5(`${curr}${random}${file.name}`) this.form.key = `ai-admin/${md5Str}.${fileType}` }, async uploadSuccess(response, file, fileList) { try { for (let fileInfo of fileList) { let imageInfo = await this.getImageInfo(fileInfo.response.key) if (this.rule) { this.rule(imageInfo, (error) => { if (error) { throw(error) } }) } if (imageInfo.width > 2048 || imageInfo.height > 2048) { throw(new Error('图片长或者宽不能超过2048')) } else { if (this.type === 'image') { this.imgUrl = response.key this.$emit('update:data', response.key) } else { if (this.showImgList.length >= this.limit) { // 限制图片张数 this.showImgList.length = this.limit throw(new Error(`最多上传 ${this.limit} 张图片`)) } this.showImgList.push(imageInfo) this.$emit('update:data', this.showImgList) } } } } catch (error) { this.$message.error(error.message) } finally { this.loading = false this.$refs.imageListUpload && this.$refs.imageListUpload.clearFiles() this.$refs.imageUpload && this.$refs.imageUpload.clearFiles() } }, removeFile(index) { this.$confirm('确定删除该图片吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { if (this.type === 'image') { this.$emit('update:data', typeof this.data === 'object' ? {} : '') } else { this.showImgList.splice(index, 1) this.$emit('update:data', this.showImgList) } }) }, onError() { this.$message.error('上传文件失败') }, getImageInfo(url){ return new Promise((resolve, reject)=>{ let image = new Image() image.src = `${this.imageCdn}${url}` image.onload = () => { resolve({ image: url, width: image.width, height: image.height }) } image.onerror = () => { reject(new Error('Could not load image at ' + url)); }; }) }, dragChange() { this.$emit('update:data', this.showImgList) }, handleRemove(file, fileList) { let imgList = fileList.map(item => { return item.response.key }) this.$emit('update:data', imgList) }, handlerClipboard(event) { if (this.clipboard) { const rawFile = getImageFromClipboard(event) if (rawFile) { this.$refs.elUpload.handleStart(rawFile) this.$refs.elUpload.$refs['upload-inner'].upload(rawFile) } } }, } } </script> <style lang="less" scoped> .image-list, .image-item { display: flex; .image-wrap { position: relative; display: inline-block; box-sizing: content-box; margin: 0 8px 8px 0; vertical-align: top; &:hover { .icon-wrap { opacity: 1; } } .icon-wrap { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; cursor: default; text-align: center; color: #fff; opacity: 0; font-size: 20px; background-color: rgba(0, 0, 0, .7); transition: opacity .3s; .el-icon-zoom-in { cursor: pointer; margin-right: 8px; } .el-icon-delete { cursor: pointer; } } } } .image-item { display: inline-flex; } /deep/.image-uploader { display: inline-block; .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; [class^="el-icon"] { font-size: 28px; color: #8c939d; text-align: center; } &:hover { border-color: #409EFF; } } } </style>
注意
这是我封装的上传图片的组件，支持 类v-model的传参方式，上传多张图时支持拖动，写图片规则（例如宽高是多少），删除图片
特别注意：因为我们还封装了图片组件，在这里被我替换了，所以图片展示有上面的代码可能有点问题，稍微改下就行
用法（只允许上传正方形的图）
<template> <image-upload :data.sync="image" :rule="rule"></image-upload> </template> <script> export default { data(){ let validate = ({ width, height }, callback) => { if (width === height) { callback() } else { callback(new Error('请上传正方形的图')) } } return { rule: validate, image: '' } }, } </script>
效果
