Element-ui上传图片按顺序展示

Posted 2022-09-02 mianbaodaxia

背景

不知道你上传图片的时候有没有过这样的情况，批量上传多张图片，可能因为图片大小或者网络问题，导致图片返回的顺序和上传时的顺序不一样。因为我们公司是做电商的，即使我们的支持拖动排序，运营还是希望图片能够严格的按照他们上传的顺序展示。

解决问题

在上传组件的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>

 

效果