一、需求：

在表單中使用圖片上傳，每一張上傳的圖片都可以加上文字說明通過表單一起傳到后臺(tái)，最后再其他需要的地方展示出來。

?二、實(shí)現(xiàn)：

1. 后端表單提交時(shí)，圖片需要的格式是：imageList[ {?fileUrl:' ',?imageExplain:' '?} ]
2. 界面代碼

• v-model="form.imageUrl"

• :action="fileUrl" 調(diào)用接口自定義的fileUrl上傳圖片到的服務(wù)路徑

• :on-success="handleSuccess"? 成功時(shí)回調(diào)方法

• :before-upload="beforeAvatarUpload" 上傳時(shí)的校驗(yàn)回調(diào)

• :before-remove="() => false"? 防止按下刪除鍵圖片和文字被刪除

• :file-list="imageList"? 圖片都存到的自定義 imageList 數(shù)組

• slot="file" slot-scope="{ file }" 自定義插槽，可以在里面實(shí)現(xiàn)輸入框

<el-form-item
        label="界面："
        class="uploader-item"
      >
        <el-upload
          v-model="form.imageUrl"
          :action="fileUrl"
          accept="image/jpg,image/jpeg,image/png"
          list-type="picture-card"
          :limit="9"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          :before-remove="() => false"
          :file-list="imageList"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.fileUrl"
              alt=""
            />
            <el-input
              v-model="file.imageExplain"
              placeholder="圖片說明"
              clearable
            >
            </el-input>
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file, imageList)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        //預(yù)覽的圖片彈框
        <el-dialog
          class="review-dialog"
          append-to-body
          :visible.sync="imgDialogVisible"
        >
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

?3. 參數(shù)定義

 data() {
    return {
      form: {
        imageList: []
      },
      fileUrl: open_upload_path, //圖片文件上傳地址
      imageList: [], //上傳的文件列表,
      dialogImageUrl: '', //圖片預(yù)覽路徑
      imgDialogVisible: false, //預(yù)覽是否可見
    }
  },

4.方法實(shí)現(xiàn)

//（文件上傳成功時(shí)的鉤子）
    handleSuccess(res, file, fileList) {
      if (res.code == 200 && res.result.url) {
        this.imageList.push({
          fileUrl: file.url,   //圖片渲染路徑
          imageUrl: res.result.url,  //要上傳的路徑
          imageExplain: ''  //要上傳的圖片說明
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上傳頭像圖片大小不能超過 5MB!')
      }
      return isJPG && isLt5M
    },
    //刪除
    handleRemove(file, fileList) {
      this.imageList = fileList.filter((item) => {
        return item.uid !== file.uid
      })
    },
    //預(yù)覽
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.fileUrl
      this.imgDialogVisible = true
    }

5. 樣式設(shè)置文章來源地址http://www.zghlxwxcb.cn/news/detail-693038.html

.uploader-item {
  margin: 60px 0 60px;
  :deep(.el-upload-list) {
    .is-success {
      overflow: hidden;
      height: auto;
      width: 192px;
      border: 0;
      border-radius: 0;
      margin-right: 10px;

      img,
      .el-upload-list__item-actions {
        height: 108px;
      }
      .el-input {
        .el-input__inner {
          height: 32px;
        }
      }
    }
    .is-ready,.is-uploading {
      display: none;
    }
  }
  :deep(.el-upload) {
    width: 192px;
    height: 108px;
    line-height: 108px;
    background: transparent;
    border: 1px solid #dcdfe6;
    border-radius: 0;
    margin-bottom: 20px;
    .el-icon-plus {
      color: #dcdfe6;
      font-size: 24px;
    }
  }
}

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