element-ui的upload組件封裝

圖片上傳

無論什么項(xiàng)目，大概都少不了圖片上傳。作為常見的需求，很多地方會(huì)使用到，應(yīng)該單獨(dú)封裝一個(gè)上傳組件，方便復(fù)用。

這里使用 vue + element-ui-upload + 七牛云完成上傳

前端調(diào)用七牛 API

現(xiàn)在主流的七牛云上傳方式大概為授權(quán)式上傳，大概為如下過程：

  • 請(qǐng)求后端接口獲取上傳憑證 token（后端通過accessKey，secretKey，bucket 生成 token）
  • 請(qǐng)求七牛云的接口地址完成上傳
  • 七牛云服務(wù)器返回圖片地址（返回 hash，key，需要自己拼接下）

如果說后端很好，在服務(wù)器端直接調(diào)用七牛上傳接口，那么前端只需要傳一個(gè)文件給后端，前端方面會(huì)簡(jiǎn)單許多。

不過我是沒有遇到的，而且前端調(diào)用上傳接口，可控性會(huì)更強(qiáng)些

關(guān)于七牛云的上傳地址：

經(jīng)過測(cè)試，上面四個(gè)接口都是可用的（https 或者 http），我這里的空間是華南區(qū)域，不同區(qū)域會(huì)有所不同，可以參考

七牛 API，有 3 個(gè)參數(shù)，token、file、key（可選），其中 key 是文件名，不傳會(huì)自動(dòng)生成

首先分析下需求，完成的 upload 組件，要和表單結(jié)合起來，意味著要實(shí)現(xiàn)雙向綁定，調(diào)用這個(gè)組件的時(shí)候，只需要綁定 value（圖片url） 屬性，組件內(nèi)部上傳完成后通過 $emit('input', url) 改變 value，這樣就很方便了

下面介紹下 el-upload 組件：

  1. action 屬性是上傳的接口地址，直接用上面的七牛云的上傳地址
  2. name 字段是文件流的參數(shù)字段名，默認(rèn)值為 file，七牛云上傳的文件流參數(shù)字段就是 file，所以這里可以忽略
  3. data 屬性是需要傳遞的參數(shù)，七牛云的上傳地址所需參數(shù)包括 file（插件會(huì)自動(dòng)傳遞）、key、token，key 可以不傳（七牛自動(dòng)生成），我們只需要獲取 token，在調(diào)用七牛之前將 token 塞到 data 中就可以了
  4. before-upload 屬性是上傳文件之前的鉤子，這里調(diào)用后端接口獲取到上傳需要的 token，塞到 data 中，然后別忘了 resolve，因?yàn)楂@取 token 是異步過程，所以在鉤子里面返回 Promise，請(qǐng)求成功后 resolve 進(jìn)行上傳（如果有校驗(yàn)文件大小、文件類型的需求也可以在鉤子中完成，提前返回 false 就可以了）

下面是代碼：

<template>
  <el-upload
    v-loading="loading"
    class="uploader"
    :class="{'hover-mask': value}"
    action="https://up-z2.qiniup.com"
    :show-file-list="false"
    :data="param"
    accept="image/*"
    :on-success="handleSuccess"
    :before-upload="handlebeforeUpload">
      <img v-if="value" :src="value" class="avatar">
      <i class="el-icon-plus uploader-icon"></i>
  </el-upload>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    value: String,
    required: true
  },
  data() {
    return {
      loading: '',
      param: {
        token: ''
      }
    }
  },
  methods: {
    handleSuccess(res, file) {
      this.loading = false
      // 如果不傳 key 參數(shù)，就使用七牛自動(dòng)生成的 hash 值，如果傳遞了 key 參數(shù)，那么就用返回的 key 值
      const { hash } = res
      // 拼接得到圖片 url
      const imageUrl = 'your domain prefix' + hash
      // 觸發(fā)事件 input，父組件會(huì)修改綁定的 value 值
      this.$emit('input', imageUrl)
    },
    handlebeforeUpload(file) {
      // 這里做可以做文件校驗(yàn)操作
      const isImg = /^image\/\w+$/i.test(file.type)
      if (!isImg) {
        this.$message.error('只能上傳 JPG、PNG、GIF 格式!')
        return false
      }
      return new Promise((resolve, reject) => {
        this.loading = true
        // 獲取token
        const tokenUrl = 'http://xxx/upload'
        axios.get(tokenUrl).then(res => {
          const { token } = res.data.data
          this.param.token = token
          resolve(true)
        }).catch(err => {
          this.loading = false
          reject(err)
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .uploader {
    width: 130px;
    height: 130px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    &:hover {
      border-color: #409EFF;
    }
    /deep/ .el-upload {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
  .uploader-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 128px;
    text-align: center;
    font-size: 28px;
    color: #8c939d;
  }
  .avatar + .uploader-icon {
    opacity: 0;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
    border-radius: 6px;
  }
  .hover-mask:hover .uploader-icon {
    opacity: 1;
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
  }
</style>

如何使用：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="頭像" prop="avatar">
      <upload v-model="form.avatar"></upload>
    </el-form-item>
    <el-form-item label="姓名" prop="userName">
      <el-input v-model="form.userName"></el-input>
    </el-form-item>
  </el-form>
    <el-button type="primary" @click="onSubmit">確 定</el-button>
</template>
<script>
import Upload from '@/components/Upload'
export default {
  components: { Upload },
  data () {
    return {
      form: {
        avatar: '',
        userName: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validata(valid => {
        if (valid) {
          // 將 this.form 傳給后端
        }
      })
    }
  }
}
</script>

實(shí)現(xiàn)雙向綁定后，收集數(shù)據(jù)會(huì)非常方便，調(diào)用后端接口直接傳遞綁定的值就 ok 了

前端直接調(diào)用后端上傳接口

如果后端很好（鐵哥們），前端只需要傳遞 file 對(duì)象，那就更簡(jiǎn)單了，在上傳前置鉤子中就不用獲取 token，這部分工作都由后端去處理，我們只需要調(diào)用上傳接口就可以

<template>
  <el-upload
    v-loading="loading"
    class="uploader"
    :class="{'hover-mask': value}"
    action="your upload api"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="handlebeforeUpload">
      <img v-if="value" :src="value" class="avatar">
        <i class="el-icon-plus uploader-icon"></i>
  </el-upload>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    value: String,
    required: true
  },
  data() {
    return {
      loading: ''
    }
  },
  methods: {
    handleSuccess(res, file) {
      this.loading = false
      const { hash } = res
      const imageUrl = 'your domain prefix' + hash
      this.$emit('input', imageUrl)
    },
    handlebeforeUpload(file) {
      // 不需要操作可以直接 返回 true
      return true
    }
  }
}
</script>

其實(shí)，我們?cè)诮M件上使用v-model的時(shí)候，實(shí)際上是下面這樣：

<custom-upload
  :value="form.avatar"
  @input="form.avatar = $event"
></custom-upload>

為了讓它正常工作，custom-upload組件內(nèi)必須：

  • 將其 value 特性綁定到一個(gè)名叫 value 的 prop 上（這里就是圖片地址）
  • 需要修value時(shí)，將新的值通過自定義的 input 事件拋出（這里就是上傳成功后的$emit('input', 圖片地址)）

所以 v-model是一個(gè)語法糖，一種簡(jiǎn)寫形式。如果想要雙向綁定，又想自定義，那么可以使用上面的方式：

<custom-upload
  :url="form.avatar"
  @update:url="form.avatar = $event"
></custom-upload>

那么在子組件內(nèi)部就接受url屬性，作為圖片地址就可以了，在更新url時(shí)，也要與綁定的事件名一致$emit('update:url', 圖片地址)，事件名使用update:propName是vue推薦的風(fēng)格，目的是提醒開發(fā)者這是一個(gè)雙向綁定的屬性。

當(dāng)然，為了方便起見，vue為這種模式提供一個(gè)縮寫，即 .sync 修飾符：

<custom-upload :url.sync="form.avatar"></custom-upload>

帶有 .sync 修飾符的值不能為表達(dá)式（例如:url.sync="domain + form.avatar"是無效的）

多圖上傳

有時(shí)候類似上傳資料、憑證這類的需求要求上傳多張圖片，我們可以再封裝一個(gè)多圖上傳的組件

對(duì)于 el-upload，多張圖片上傳注意如下幾點(diǎn)：

  1. props 的 value 不再是string，應(yīng)該是一個(gè)數(shù)組，數(shù)組成員為圖片地址['url1', 'url2']
  2. file-list屬性為上傳的文件列表，我們不能直接把 value 賦值給它，file-list應(yīng)該是一個(gè)數(shù)組，例如[{name: 'foo.jpg', url: 'xxx'}, {name: 'bar.jpg', url: 'xxx'}]。這與我們傳進(jìn)來的數(shù)據(jù)不一樣，需要處理一下 value（當(dāng)然我們使用組件時(shí)可以直接傳遞需要的這種格式，就不用處理了）
  3. show-file-list 設(shè)置為 true，當(dāng)然可以不傳，它默認(rèn)為 true
  4. list-type 可以設(shè)置為 'picture-card'，圖片將以卡片形式顯示
  5. on-remove 屬性為文件列表移除文件時(shí)的鉤子，這里需要觸發(fā)事件，更新 value
  6. on-preview 屬性為點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子，可以做圖片預(yù)覽
  7. limit 屬性可以指定最大允許上傳個(gè)數(shù)，配合 on-exceed 屬性（文件超出個(gè)數(shù)限制時(shí)的鉤子）使用，當(dāng)上傳超過指定值后，在這個(gè)鉤子里面做些提示

下面是代碼：

<template>
  <div>
    <el-upload
      :action="QINIU_UPLOAD_URL"
      :data="param"
      :file-list="fileList"
      list-type="picture-card"
      :limit="limit"
      :on-exceed="handleUploadExceed"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :before-upload="handlebeforeUpload"
      :on-success="handleSuccess">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    limit: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      dialogImageUrl: '', // 當(dāng)前預(yù)覽圖片地址
      dialogVisible: false, // 預(yù)覽彈框 visible
      param: {
        token: ''
      }
    }
  },
  computed: {
    // ['xxx', 'xxx'] 轉(zhuǎn)換為 [{url: 'xxx'}, {url: 'xxx'}]
    fileList() {
      return this.value.map(url => ({ url }))
    }
  },
  methods: {
    handleUploadExceed() {
      this.$message.error(`最多上傳${this.limit}張圖片`)
    },
    handleRemove(file, fileList) {
      // fileList 為刪除后的文件列表
      const value = fileList.map(v => v.url)
      this.$emit('input', value)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlebeforeUpload(file) {
      return new Promise((resolve, reject) => {
        axios.get('/upload/qiniuToken').then(res => {
          const { token } = res.data
          this.param.token = token
          resolve(true)
        }).catch(err => {
          reject(err)
        })
      })
    },
    handleSuccess(res, file) {
      const { hash } = res
      const imageUrl = this.QINIU_PREFIX + hash
      // 這里如果 this.value.push(imageUrl) 這么寫，vue會(huì)報(bào)出警告，大概意思是value作為props不應(yīng)該在子組件中被修改
      // 應(yīng)該根據(jù) value 得到新的值，而不能修改它，this.value.concat(imageUrl)也是可以的，concat方法返回新的數(shù)組
      this.$emit('input', [...this.value, imageUrl])
    }
  }
}
</script>

如何使用：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="還款金額" prop="amount">
      <el-input v-model="form.amount"></el-input>
    </el-form-item>
    <el-form-item label="憑證" prop="voucherUrlList">
      <multi-upload v-model="form.voucherUrlList"></multi-upload>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="onSubmit">確 定</el-button>
</template>
<script>
import MultiUpload from '@/components/MultiUpload'
export default {
  components: { MultiUpload },
  data () {
    return {
      form: {
        amount: '',
        voucherUrlList: []
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validata(valid => {
        if (valid) {
          // 將 this.form 傳給后端
        }
      })
    }
  }
}
</script>

把上傳組件封裝成雙向綁定的形式后，我們使用會(huì)更方便，也方便復(fù)用。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容