element upload 圖片上傳 回顯 及刪除

目標(biāo)需求

• 圖片上傳
• 圖片回顯
• 可以刪除圖片
• 效果圖

實(shí)現(xiàn)

模板

	<el-form-item :label="$t('station.img')" prop="images">
          <el-upload
            :limit="3"
            action=""
            accept=".png, .jpg"
            show-file-list
            :on-change="handleChange"
            :on-remove="handleRemove"
            list-type="picture-card"
            :file-list="fileList"
            :auto-upload="false"
            multiple
          >
            <i slot="default" class="el-icon-plus" />
          </el-upload>
        </el-form-item>

js

  data() {
    return {
      fileList: [],//這個(gè)必須要有,用來同步組件中的fileList
      form:{
			images:[] //表單中的圖片列表
		}
     }
   methods: {
   // 刪除圖片時(shí)候同步到表單刪除
   handleRemove(file, fileList) {
      const index = this.fileList.findIndex((item) => {
        return item.uid === file.uid
      })
      this.form.images.splice(index, 1)
      this.fileList.splice(index, 1)
    },
    // 上傳
    handleChange(file, fileList) {
      const isImg = (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg')
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isImg) {
        this.$message.error(this.$t('common.uploadTip8'))
        this.fileList.splice(this.fileList.length, 1)
        return false
      }
      if (!isLt1M) {
        this.$message.error(this.$t('common.uploadTip3'))
        this.fileList.splice(this.fileList.length, 1)
        return false
      }
      // 同步組件中的fileList
      this.fileList = JSON.parse(JSON.stringify(fileList))
      const formData = new FormData()
      formData.append('file', file.raw)
      // 調(diào)用上傳接口獲取對(duì)應(yīng)的http圖片地址
      uploadFile(formData).then((res) => {
        this.form.images.push(res.data.fileList[0].path)
      })
    },
    // 超出圖片數(shù)量時(shí)候的提示
    handleExceed(files, fileList) {
      this.$message.warning(this.$t('common.uploadTip9'))
    },
    // 回顯
    getDetail() {
      getStationInfo(this.$route.query.id).then((res) => {
        this.form = res.data
        // 這一步是回顯必要的,賦值給fileList
        if (this.form.images) {
          this.form.images.forEach(item => {
            this.fileList.push({
              url: item
            })
          })
        }
      })
    }
}

難點(diǎn)

理解 upload 中的 fileList 這個(gè)參數(shù),需要將這個(gè)參數(shù)存起來回顯,以及刪除的時(shí)候找到對(duì)應(yīng)刪除的圖片下標(biāo)文章來源地址http://www.zghlxwxcb.cn/news/detail-605565.html

到了這里，關(guān)于element upload 圖片上傳 回顯 及刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！